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