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}
<inputtype="email"list="emails"multiple><datalistid="emails"><optionvalue="first@example.com"><optionvalue="second@example.com"><optionvalue="third@example.com"><optionvalue="last@example.com"></datalist><br><br><br><inputtype="text"list="texts"multiple><datalistid="texts"><optionvalue="black"><optionvalue="gold"><optionvalue="grey"><optionvalue="pink"><optionvalue="turquoise"><optionvalue="red"><optionvalue="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

<scriptsrc="http://code.jquery.com/jquery-1.8.3.min.js"></script><scriptsrc="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><linkhref="jquery.flexdatalist.css"type="text/css"></head><body><inputtype="text"placeholder="Choose a fruit"class="flexdatalist form-control"data-min-length="1"data-searchContain="true"multiple="multiple"list="fruit"name="my-fruit"><datalistid="fruit"><optionvalue="Apples">Apples</option><optionvalue="Bananas">Bananas</option><optionvalue="Cherries">Cherries</option><optionvalue="Kiwi">Kiwi</option><optionvalue="Pineapple">Pineapple</option><optionvalue="Zucchini">Zucchini</option></datalist><scriptsrc="http://code.jquery.com/jquery-1.8.3.min.js"></script><scriptsrc="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 = ',';
        
functionfilldatalist(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: 10px0;
}
input {
  border: 2px solid #1E824C;
  color: #333;
  font-size: 12px;
  padding: 5px3px
}
small {
  display: block;
  font-size: 11px;
  padding-top: 5px;
}
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script><labelfor="authors">Type authors from favorite to least favorite</label><inputtype="text"list="names-list"id="authors"value=""size="50"name="authors"placeholder="Type author names"><small>You can type how many you want.</small><datalistid="names-list"><optionvalue="Albert Camus"><optionvalue="Alexandre Dumas"><optionvalue="C. S. Lewis"><optionvalue="Charles Dickens"><optionvalue="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"