multiple selections with datalist

Question

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:

Answer 1

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

• between your tags of the page with the datalist

4. Include these attributes in your element that contains your datalist

(along with your other attributes)

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

5. Include three JavaScript statements after your datalist

---

Working example:

[DOMAIN]/index.html:

With the two files here:

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

[DOMAIN]/css/jquery.flexdatalist.css

---

An alternative, with great documentation, is: Awesomeplete