multiple selections with datalist

我是研究僧i 提交于 2020-06-01 05:07:11

问题


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?


回答1:


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

look at this minimalist example:

<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>

<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>

( http://jsfiddle.net/iiic/t66boyea/1/ )

First input will be working, second NOT. You only press comma, and list will appear as same as on click into input.




回答2:


Customized datalist to accept multiple values:

https://jsfiddle.net/bhbwg0rg/1/

After each entry press ,(Comma) and then Spacebar

<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>



回答3:


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




回答4:


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.




回答5:


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



来源:https://stackoverflow.com/questions/62049038/adding-options-to-a-datalist

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!