Welcome to WebmasterWorld Guest from 54.221.131.67

Forum Moderators: incrediBILL

Message Too Old, No Replies

Using datalist with Chrome

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

Preferred Member

10+ Year Member

joined:May 23, 2002
posts: 446
votes: 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
4:15 pm on Oct 12, 2016 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:3563
votes: 197


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.
1:22 am on Oct 13, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts: 1586
votes: 424


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...]
8:34 am on Oct 13, 2016 (gmt 0)

New User

joined:Sept 15, 2016
posts: 5
votes: 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
8:38 am on Oct 13, 2016 (gmt 0)

New User

joined:Sept 15, 2016
posts: 5
votes: 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
5:13 pm on Oct 13, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts: 1586
votes: 424


@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.
3:29 am on Oct 14, 2016 (gmt 0)

Preferred Member

10+ Year Member

joined:May 23, 2002
posts: 446
votes: 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
8:41 am on Oct 14, 2016 (gmt 0)

New User

joined:Sept 15, 2016
posts: 5
votes: 0


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