Множественный выбор с помощью datalist

Я использую тег, чтобы создать список предложений для моего окна поиска, но я не могу выбрать несколько значений из datalist. В настоящее время мой HTML:

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

Он предложит предложения по одному пункту, но после этого предложения не будут предлагать автозаполнение для моего второго варианта. Я думал, что тег "multiple" был всем, что мне нужно (и что предлагается в Интернете), но оно, похоже, не имеет желаемого эффекта.

Любые предложения?

Ответы

Ответ 1

Несколько в настоящее время работают только с типом ввода = "электронная почта" и только в Chrome и Opera

посмотрите на этот минималистский пример:

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

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

Первый вход будет работать, второй NOT.. Вы только нажимаете запятую, и список будет отображаться так же, как при щелчке на вкладке.

Ответ 2

Настроенный список данных для принятия нескольких значений:

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

После каждой записи нажимайте , (запятую), а затем пробел

<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

В соответствии с этим атрибут "multiple" действителен только для типов ввода электронной почты и файлов.

Ответ 4

У меня была та же самая проблема, и предложенные решения, казалось, не сокращали это. Я написал этот плагин Pure JS (безопасный для IE11) UnComplete, чтобы создать взаимодействие, помогающее управлять несколькими значениями.

Ответ 5

Супер-простой инструмент jQuery: Flexdatalist

Я хотел что-то попроще, но атрибут "множественный", насколько я понимаю, работает только с электронной почтой и файлами, потому что разработчики HTML5 не хотят открывать червячную банку, но разработчики рассматривают возможность изменения, После поиска по всему, единственный способ, с помощью которого я мог заставить это работать, состоял в том, чтобы также получить эти необычные, полезные элементы "#tagHere X" в списке, как на многих сайтах. Это было все или ничего, и это решило мою проблему.

К сожалению, я не смог найти полных инструкций по использованию Flexdatalist. Итак, я включаю супер-полный обзор с рабочим примером, простите, если это слишком много...

1. Получите только два файла от Flexdatalist на GitHub

  • jquery.flexdatalist.min.js
  • jquery.flexdatalist.css (Вместо этого вы можете использовать .min.js, но, вероятно, захотите настроить CSS)

2. Поместите эти два файла в нужное место:

Я использовал:

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

[DOMAIN]/css/jquery.flexdatalist.css

3. Включить файл CSS

либо:

  • @import "jquery.flexdatalist.css"; в вашем файле style.css уже в [DOMAIN]/css/

или

  • <link href="css/jquery.flexdatalist.css" rel="stylesheet" type="text/css"> между вашими <head> тегами страницы с datalist

4. Включите эти атрибуты в свой тег <input>, который содержит ваш datalist

(вместе с другими вашими атрибутами)

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

5. Включите три оператора JavaScript после вашего 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>

Рабочий пример:

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

С двумя файлами здесь:

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

[DOMAIN]/css/jquery.flexdatalist.css

Альтернатива с отличной документацией: Awesomeplete