HTML: select vs datalist

select

-> Creates drop down list
-> Doesn't filter items rather highlights the matching text
-> By default first option gets selected and populated as selected value
-> User can only select from a given list
-> User can make any option selected by default using selected attribute
-> To get selected value: document.getElementById('select#id').value;
-> We can apply onchange on select tag.
-> select by default display:inline-block
-> Option label populated and shown as option

datalist

-> Specifies list of predefined options for an input element
-> Shows only filtered items as soon as user start typing in text box
-> Doesn't select any option by default.
-> User can choose from list or enter his own item.
-> We have to assign value attribute to pre-populate data in input
-> To get selected value: document.getElementById('input#id').value;
-> We can apply onchange on input element
-> Datalist by default display: none
-> Option value only populated in data list

select with examples

-> Creates drop down list

 <label for="cars">Select a car: </label> <select id="cars" name="cars"> <option value="volvo">VOLVO</option> <option value="bmw">BMW</option> <option value="audi">AUDI</option> <option value="lamborghini">LAMBORGHINI</option> </select> 

-> Doesn't filter items rather highlights the matching text. Type in 'B' incase of our example and observe that BMW gets highlighted.

-> By default first option gets selected and populated as selected value

-> User can only select from given list
We can't type in any characters as it is not an input box. Hence only option is to select from given list.

-> User can make any option selected by default using selected attribute

 <label for="cars">Select a car: </label> <select id="cars" name="cars"> <option value="volvo">VOLVO</option> <option value="bmw" selected>BMW</option> <option value="audi">AUDI</option> <option value="lamborghini">LAMBORGHINI</option> </select> 

-> To get selected value: document.getElementById('select#id').value;

 document.getElementById('cars').value; > bmw 

-> We can apply onchange on select tag.

 <label for="cars">Select a car: </label> <select id="cars" name="cars" onchange="optionChanged(event)"> <option value="volvo">VOLVO</option> <option value="bmw" selected>BMW</option> <option value="audi">AUDI</option> <option value="lamborghini">LAMBORGHINI</option> </select> <script> function optionChanged(event) { console.log(event.target.value); } </script> 

-> select by default display:inline-block

-> option label populated and shown as option
value is 'volvo' and its label is VOLVO. All the cars labels are displayed in dropdown.

Datalist with examples:

-> specifies list of predefined options for input element

 <label for="car">Select a car: </label> <input list="cars" name="cars" id="car"> <datalist id="cars"> <option value="volvo"> <option value="bmw"> <option value="audi"> <option value="lamborghini"> </datalist> 

-> Shows only filtered items as soon as user start typing in text box

-> Doesn't select any option by default.

-> User can choose from list or enter his own item.

-> We have to assign value attribute to pre-populate data in input

 <label for="cars">Select a car: </label> <input list="car" name="car" id="cars" value="audi"> <datalist id="car"> <option value="volvo"> <option value="bmw"> <option value="audi"> <option value="lamborghini"> </datalist> 

-> to get selected value: document.getElementById('input#id').value;

 document.getElementById('cars').value; 

-> we can apply onchange on input element

 <label for="cars">Select a car: </label> <input list="car" name="car" id="cars" onchange="optionChanged(event)"> <datalist id="car"> <option value="volvo"> <option value="bmw"> <option value="audi"> <option value="lamborghini"> </datalist> <script> function optionChanged(event) { console.log(event.target.value); } </script> 

-> datalist by default display: none

-> option value only populated in data list We only provided values for each option element and not the labels. Also, same are populated.

 <label for="car">Select a car: </label> <input list="cars" name="cars" id="car"> <datalist id="cars"> <option value="volvo"> <option value="bmw"> <option value="audi"> <option value="lamborghini"> </datalist> 

Thanks.

Point any further differences.

Follow: https://twitter.com/urstrulyvishwak