How to set auto-complete suggestions with 'datalist' - HTML Tutorial

In this video I'll be showing you how to use the HTML "datalist" element to setup auto-suggestions for your input fields. This allows you (or the web page) to be in control of suggestions rather than the default auto-complete.

Support me on Patreon:

For your reference, check this out:

Follow me on Twitter @dcodeyt!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

[prathmeshsikchi]

Thanks a lot, I was searching the video on this topic from a long ago

[zurggie]

Didn't know this was available with html only. Thanks man.

[hstrinzel]

Great video! Is there a way to lock users into using ONLY the defined list items, rather than letting them type ANYTHING in the input field?

[tamalanwar]

Thanks a lot. Just learned something new

[umtabtv]

Thanks, Sir what is the solution if to say I speed out data from DB with id e.g 1 red, 2 blue, 3 green ... where I want to suggest the user color names, when user selected a color I want display only the name while storing the color id in the input. I need your help Sir.

Thanks in advance

[yogeshvaidya]

i have a 4 lake records and datalist size is going to out of modal page any solution here, i just want to show 10 records on first mouse hover or click,

[nickwoodward]

Nice. Anyway of having a default suggestion? IE if 'pink' didn't exist as an option, having 'no color found'?

[ziwbqdf]

hi, how to change width of datalist? in my situation it depends on width of the elements, but i want fix the width and it should be equal withd of the label

[nicolajslvsten]

anyone with a clever solution to allow for a different order of words?
for instance if an option is "java script" and i search "script java" in the input field the option isn't shown.

[jorgeabuauad]

How to make suggestion from the database like Udemy it even give word before you write

[Its-N]

Please include the javascript error handling while using datalist

[simplejosecom]

At 3:27, how did you write on all three lines at the same time? Thanks

[mongalmoykarmakar]

I want to know how you added custom css to it. For me any custom css is not working.

[guidedog]

How would you connect this to a database? Like a Read from database and give suggestions from there

[bssushmitha]

Could you please make a video on how to add CSS to the datalist tag and its options??

[kalenzo]

I'm calling you out on #31days 31coding projects challenge ..

[modeal]

had literally nothing to do with auto-complete.. waste of time. Glad I skipped most of it.

[umtabtv]

Thanks, Sir what is the solution if to say I speed out data from DB with id e.g 1 red, 2 blue, 3 green ... where I want to suggest the user color names, when user selected a color I want display only the name while storing the color id in the input. I need your help Sir.

Thanks in advance