Multiple Selections with Datalist

Choose multiple data from datalist dropdown

Multiple currently working only with input type="email" and only in Chrome and Opera

Reference: multiple selections with datalist

How can i select values from datalist dropdown multiple times and store the value each time in a new row in table?

Yes the value is being replaced because you are just setting the .text property. You should use .append or .add, or some method that doesn't overwrite.

If you want it to append an actual new grid row, then create a new element that is the grid row populated with the correct values. Then, append the new element

Is it possible to reuse a datalist on multiple elements?

To answer first the question in the title: yes, you can use the same datalist element in multiple controls, by using its id attribute value in different input elements, e.g.

<datalist id="colors">...</datalist>
<label for="car">Color of your car:</label> <input type="color" id="car" list="colors">
<label for="tie">Color of your tie:</label> <input type="color" id="tie" list="colors">

Regarding the question “Where should I put it?”, the HTML5 LC says about datalist:

Contexts in which this element can be used:
Where phrasing content is expected.

This means pretty much any place inside the document body, but not in head. When used properly, its placement does not matter, since it generates no visible content as such. You can put it e.g. right before (or after) the first input element that refers to it or, if you prefer, at the start or end of body.

However, if use markup like <option>#ff0000</option>, as opposite to <option value="#ffff00">, in this context, then the placement matters, since now there is visible content (the string #ff0000). On old browsers that do not support the datalist element, such content will be shown where you place the element.

If you are using <input type="color">, which seems probable, then you should consider what happens on IE that does not support that element type. The problem is that sufficiently new versions of IE support datalist but even IE 11 still implements <input type="color"> as a simple text box,. This means that the user, on clicking element, would see a dropdown list of color codes like #FF0000. For this reason, unless IE is irrelevant, you should specify a visible name for the color in alabel` attribute, e.g.

  <option value="#ff0000" label="red">
  <option value="#FF5100" label="red orange">

In this approach, the datalist element could still be placed almost anywhere inside body and could be referenced by more than one input element.

How to create data-list for multiple input fields on the form? HTML5

All the input fields point to the same datalist . So just add the list attribute with the same value to all your fields:

<input type="text" list="hzIntervals" size="3" />
<input type="text" list="hzIntervals" size="5" />
<datalist id="hzIntervals" style="width:20px;"></datalist>

check this fiddle: https://jsfiddle.net/yfd5c2nw/3/

html Select multiple option with simple click without pressing CTRL button

I think you want somethings like this :

$('select[multiple]').multiselect()

<!DOCTYPE html><html><head><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" />
</head><body>
<select multiple="multiple">    <option value="cheese">Cheese</option>    <option value="tomatoes">Tomatoes</option>    <option value="mozarella">Mozzarella</option>    <option value="mushrooms">Mushrooms</option>    <option value="pepperoni">Pepperoni</option>    <option value="onions">Onions</option></select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script></body></html>

Issue when trying to sync multiple input with datalist id

datalist doesn't support events
You can achieve the same result with dropdown and listening on a particular value being selected.

<select class="form-control bordered" id="dd_list">
    <option></option>
    <option value="val1" > Value 1</option>
    <option value="val2" > Value 2</option>
    <option value="val3" > Value 3</option>
    <option value="val4" > Value 4</option>
    <option value="val5" > Value 5</option>
    <option value='other'> Other</option>
</select>
<input type="text" id="dd_list_other" class="form-control bordered" title="Press Escape to show DD" placeholder="Enter value or press ESC" style="display: none" />

And the JS code

$('#dd_list').on('change', function(){
    var v = $(this).val();
    if( v == "other" ){
        $(this).hide();
        $('#dd_list_other').show();
        $('#dd_list_other').focus();
    }
});

$('#dd_list_other').on('keydown', function(e){
    if(e.which == 27){ // ESC keycode
        $(this).val('');
        $(this).hide();
        $('#dd_list').show();
    }
});

Check Demo Fiddle