Using datalist with Chrome

Forum Moderators: open

Message Too Old, No Replies

Using datalist with Chrome

giggle

6:41 am on Oct 12, 2016 (gmt 0)

Hi, I hope this is the correct forum for this question.

I want my customers to be able to type in the country they're interested rather than select from a very long list.

I set up a datalist and provided an input. All seems great, but, when using it in Chrome, if the customer clicks the down arrow Chrome tries to display the whole list but there seems to be a chrome bug that doesn't display a scroll bar. The result is rather unsatisfactory.

Is there some work-around to either display a scroll bar or not allow the full list of countries to be displayed?

Alternatively, does anyone have a handy script that allows the user to type in and have options displayed? I'ver tried lost from Google searches but cannot get any to work easily. Working from some form of datalist (or any internal list) would be ideal as the list varies.

Thanks for reading.

Mick

not2easy

4:15 pm on Oct 12, 2016 (gmt 0)

Have you set a display: property in your css for the datalist? Is this a html5 (doctype) page and does your datalist use the <datalist> tag?

BTW - I have not checked this recently so it may not still apply, but I see in some older notes on the topic that Safari does not support the <datalist> element.

NickMNS

1:22 am on Oct 13, 2016 (gmt 0)

I would recommend using autocomplete, this will populate the field with valid selections as the user types into the field.
Here is a link to the code for doing it in JQuery, they provide several options and variations.
[jqueryui.com...]

giggle2

8:34 am on Oct 13, 2016 (gmt 0)

Thanks not2easy but it didn't seem to have an effect.

NickMNS - that's great! I managed to modify my code to accommodate that method, The only thing I'm struggling with now is that, after selecting the country, the customer then has to select both a pick up and a drop off location. It appears that all inputs have to have the id "tags" - can't have two of them on the same screen! Scratching my head....

Cheers

Mick

giggle2

8:38 am on Oct 13, 2016 (gmt 0)

Thanks not2easy but it didn't seem to have an effect.

NickMNS - that's great! I managed to modify my code to accommodate that method,

Cheers

Mick

NickMNS

5:13 pm on Oct 13, 2016 (gmt 0)

@giggle2, they do not need to have any specific id tag. But the id used must updated at all the required locations:

replace the id in line 37 (default):

 $( "#newTag" ).autocomplete({

and then again on the input at line 46, 47:

 <label for="newTag">Tags: </label> 
 <input id="newTag">

And obviously each tag used must be unique, so if you have three autocomplete fields you will need three unique tags.

giggle

3:29 am on Oct 14, 2016 (gmt 0)

Thanks again Nick, that all works great.

I only wish I was somehow able to pass a code along with the location selected. e.g. if the customer enters Bangkok the parameter BKK is selected. I guess that I can work around that.

Thanks again for your help.

Mick

giggle2

8:41 am on Oct 14, 2016 (gmt 0)

And finally....I managed to pass the depot code parameter using the label/value array option.