Множественный выбор с помощью 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

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

(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
1. Получите только два файла от Flexdatalist на GitHub
2. Поместите эти два файла в нужное место:
3. Включить файл CSS
4. Включите эти атрибуты в свой тег <input>, который содержит ваш datalist
5. Включите три оператора JavaScript после вашего datalist
Рабочий пример:

Содержание

Супер-простой инструмент jQuery: Flexdatalist
1. Получите только два файла от Flexdatalist на GitHub
2. Поместите эти два файла в нужное место:
3. Включить файл CSS
4. Включите эти атрибуты в свой тег <input>, который содержит ваш datalist
5. Включите три оператора JavaScript после вашего datalist
Рабочий пример:

Супер-простой инструмент 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

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

[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