Skip to content Skip to sidebar Skip to footer
Home / Html / Html Datalist

Multiple Selections With Datalist

Post a Comment
I'm using the tag to create a list of suggestions for my search box, but I cannot select multiple values from the datalist. Currently, my HTML is:

Solution 1:

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

Look at this minimalist example:

input{width:500px}
<input type="email" list="emails" multiple>
<datalist id="emails">
    <option value="first@example.com">
    <option value="second@example.com">
    <option value="third@example.com">
    <option value="last@example.com">
</datalist>

<br><br><br>

<input type="text" list="texts" multiple>
<datalist id="texts">
    <option value="black">
    <option value="gold">
    <option value="grey">
    <option value="pink">
    <option value="turquoise">
    <option value="red">
    <option value="white">
</datalist>

First input will be working, second NOT.

You only press comma, and list will appear as same as on click into input.


Solution 2:

Super-simple jQuery tool: Flexdatalist

I wanted something simpler, but the "multiple" attribute, from what I understand, only works with email and files because the HTML5 devs don't want to open a can of worms, but devs are considering a change. After searching all over, the only way I could get this to work was to also get those fancy, useful "#tagHere X" items in the list like on so many websites. It was all or nothing and it solved my same problem.

Unfortunately, I couldn't find complete instructions on how to use Flexdatalist. So, I'm including a super-complete walk-through with a working example, pardon if it it too much...

1. Get only two files from Flexdatalist on GitHub

  • jquery.flexdatalist.min.js
  • jquery.flexdatalist.css (You could do .min.css instead, but you probably want to tweak the CSS)

2. Put these two files in the right place:

I used:

[DOMAIN]/js/jquery.flexdatalist.min.js

[DOMAIN]/css/jquery.flexdatalist.css

3. Include the CSS file

either:

  • @import "jquery.flexdatalist.css"; in your style.css file already in [DOMAIN]/css/

or

  • <link href="css/jquery.flexdatalist.css" type="text/css"> between your <head> tags of the page with the datalist

4. Include these attributes in your <input> element that contains your datalist

(along with your other attributes)

  • <input... class="flexdatalist form-control" data-min-length="1" data-searchContain="true" multiple="multiple" ...>

5. Include three JavaScript statements after your datalist

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="js/jquery.flexdatalist.min.js"></script>
<script>
$('.flexdatalist-json').flexdatalist({
     searchContain: false,
     valueProperty: 'iso2',
     minLength: 1,
     focusFirstResult: true,
     selectionRequired: true,
});
</script>

Working example:

[DOMAIN]/index.html:

<!DOCTYPE html>
<html>
<head>
<title>Flexdatalist Minimalist</title>
<link href="jquery.flexdatalist.css"  type="text/css">
</head>
<body>

<input type="text" placeholder="Choose a fruit"

  class="flexdatalist form-control"
  data-min-length="1"
  data-searchContain="true"
  multiple="multiple"

list="fruit" name="my-fruit">
<datalist id="fruit">
  <option value="Apples">Apples</option>
  <option value="Bananas">Bananas</option>
  <option value="Cherries">Cherries</option>
  <option value="Kiwi">Kiwi</option>
  <option value="Pineapple">Pineapple</option>
  <option value="Zucchini">Zucchini</option>
</datalist>

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="jquery.flexdatalist.min.js"></script>
<script>
$('.flexdatalist-json').flexdatalist({
     searchContain: false,
     valueProperty: 'iso2',
     minLength: 1,
     focusFirstResult: true,
     selectionRequired: true,
});
</script>

</body>
</html>

With the two files here:

[DOMAIN]/js/jquery.flexdatalist.min.js

[DOMAIN]/css/jquery.flexdatalist.css

An alternative, with great documentation, is: Awesomeplete


Solution 3:

Customized datalist to accept multiple values:

After each entry press ,(Comma) and then Spacebar

var datalist = jQuery('datalist');
var options = jQuery('datalist option');
var optionsarray = jQuery.map(options ,function(option) {
        return option.value;
});
var input = jQuery('input[list]');
var inputcommas = (input.val().match(/,/g)||[]).length;
var separator = ',';
        
function filldatalist(prefix) {
    if (input.val().indexOf(separator) > -1 && options.length > 0) {
        datalist.empty();
        for (i=0; i < optionsarray.length; i++ ) {
            if (prefix.indexOf(optionsarray[i]) < 0 ) {
                datalist.append('<option value="'+prefix+optionsarray[i]+'">');
            }
        }
    }
}
input.bind("change paste keyup",function() {
    var inputtrim = input.val().replace(/^\s+|\s+$/g, "");
  //console.log(inputtrim);
    var currentcommas = (input.val().match(/,/g)||[]).length;
  //console.log(currentcommas);
    if (inputtrim != input.val()) {
        if (inputcommas != currentcommas) {
            var lsIndex = inputtrim.lastIndexOf(separator);
            var str = (lsIndex != -1) ? inputtrim.substr(0, lsIndex)+", " : "";
            filldatalist(str);
            inputcommas = currentcommas;
        }
        input.val(inputtrim);
    }
});
html,
body {
  display: flex;
  align-items:center;
  flex-direction: column;
  justify-content: center;
  min-height: 100%
}

label {
  display: block;
  font-size: 15px;
  padding: 10px 0;
}
input {
  border: 2px solid #1E824C;
  color: #333;
  font-size: 12px;
  padding: 5px 3px
}
small {
  display: block;
  font-size: 11px;
  padding-top: 5px;
}
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

<label for="authors">Type authors from favorite to least favorite</label>
<input type="text" list="names-list" id="authors" value="" size="50" name="authors" placeholder="Type author names">
<small>You can type how many you want.</small>
<datalist id="names-list">
  <option value="Albert Camus">
  <option value="Alexandre Dumas">
  <option value="C. S. Lewis">
  <option value="Charles Dickens">
  <option value="Dante Alighieri">
</datalist>

Solution 4:

According to this 'multiple' attribute is only valid with email and file input types.


Solution 5:

I had the same problem and the solutions suggested just did not seem to cut it. I wrote this Pure JS (IE11 safe) plugin UnComplete to create an interaction that helped manage multiple values.


You may like these posts

Post a Comment for "Multiple Selections With Datalist"