发表新帖
发表新帖

multiple selections with datalist

后端 未结
关注
5 1051
心在旅途
心在旅途 2020-11-28 10:47

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:
相关标签:
5条回答
  • 日久生厌
    2020-11-28 11:05

    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.

    0 讨论(0)
  • 一生所求
    2020-11-28 11:06

    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.

    0 讨论(0)
  • 予麋鹿
    2020-11-28 11:09

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

    0 讨论(0)
  • 再見小時候
    2020-11-28 11:10

    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>
    0 讨论(0)
  • 一生所求
    2020-11-28 11:17

    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

    0 讨论(0)
 看不清?
提交回复
热议问题