search

Fyrd / purejs-datalist-polyfill

A pure JS (no jQuery required) implementation of the HTML5 datalist element
MIT License
60 stars 41 forks source link

Arrow indicator #2

Open thisconnect opened 7 years ago

thisconnect commented 7 years ago

Hi, this is a nice polyfill. Do you still use it yourself?

Would it be possible to implement the arrow on focus to indicate that there are options?

tdolphin commented 7 years ago

To show the options on focus, in the function buildlist, I changed the line isFound to

var isFound = (query.length<1) || (query.length && item.innerText.toLowerCase().indexOf( query ) > -1);

For the arrow, I added a span with class darrow after the input

<input type="text" list="states"><span class="darrow"></span>
.darrow:after{
    content: '';
    display: inline-block;
    position: relative;
    top: 3px;
    left: -16px;
    width: 0;
    height: 0;
    border-top: 5px solid black;
    border-right: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid transparent;
}