CODEWITHSUNDEEP
htmlhtml-datalist
nathan lachenmyer
nathan lachenmyer

Reputation: 5550

multiple selections with datalist

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:

<html>

  <form action="search_tags.php" method="GET"/>

  Search: <input type="text" multiple="multiple" name="search" list="tags" autocomplete="off" />

  <datalist id="tags">
    <option value="black">
    <option value="gold">
    <option value="grey">
    <option value="pink">
    <option value="turquoise">
    <option value="red">
    <option value="white">
  </datalist>

</html>

It will offer suggestions for one item, but after that the suggestions won't suggest an autocomplete for my second option. I thought that the 'multiple' tag was all I needed (and what is suggested online) but it doesn't seem to have the desired effect.

Any suggestions?

Upvotes: 33

Views: 60683

Answers (5)

iiic
iiic

Reputation: 1352

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="[email protected]">
    <option value="[email protected]">
    <option value="[email protected]">
    <option value="[email protected]">
</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.

There's also a polyfill, look at the working example in fiddle : https://jsfiddle.net/iiic/gprLnuwy/4/

Upvotes: 25

Alex Fiedler
Alex Fiedler

Reputation: 31

I found another way around this without using any external tools.

HTML example

<input type="email" class="multidatalist" multiple="multiple" name="search" list="tags" autocomplete="off" />
  <datalist id="tags">
    <option value="black">
    <option value="gold">
    <option value="grey">
  </datalist>

jQuery code (could also be done in direct javascript)

$(".multidatalist").focusin ( function() { $(this).attr("type","email"); });    
$(".multidatalist").focusout( function() { $(this).attr("type","textbox"); });

This basically set the input as an "email" type when you have clicked in the box, so the HTML5 multiple datalist works normally. Then when you click out of it, the input is switched back to "textbox", so that you can submit the form without the email limitations.

This worked for me and saved me having to use more complex jquery/jscript addons.

Upvotes: 3

Neil
Neil

Reputation: 849

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>

Upvotes: 2

Jesse
Jesse

Reputation: 996

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" rel="stylesheet" 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" rel="stylesheet" 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

Upvotes: 5

Blue
Blue

Reputation: 728

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

Upvotes: 3

Related Questions