Автозаполняемое поле в форме

335
24 ноября 2017, 05:46

Мне нужно сделать поле, которое динамически предлагает возможные варианты при вводе. Нашел flexdatalist, и все бы ничего, только не могу предварительно вставить данные в поле - скрипт все удаляет.
Вот часть документации, где описывается то, что мне нужно. Все делаю так же, как в документации, но выводится просто пустое поле.
Часть кода:

<input 
value='{$content[0]['disease_id']}'
type="text" 
class="form-control flexdatalist" 
id="disease_id" 
name="disease_id"
data-url='/json?get=diseases'
data-search-in='name'
data-text-property='name'
data-visible-properties='["name"]'
data-selection-required='true'
data-value-property='id'
data-min-length='0'
required>


Кто работал с flexdatalist, подскажите, что же делаю не так, или, что есть из альтернативы этому(обязательно должна быть поддежка выбора нескольких значений)?
Как быть-то?

Answer 1
<!--
Виджет autocomplete
-------------------
Виджет "autocomplete" позволяет ускорить ввод данных в поле, отображая по мере введения определенные предположения. 
Выбрав одно из предположений пользователь может автоматически завершить ввод.
Предположения выводится в случае, если данные введенные пользователем совпадают со значением одного из элементов из списка данных.
Вы можете подключать к виджету как локальные (т.е. определенные в скрипте на этой же странице) так и удаленные списки 
(т.е. находящиеся на удаленном сервере).
Локальные списки удобны для хранения небольших наборов данных (например список улиц города), а удаленные списки подходят 
для хранения больших наборов данных (например база данных всех городов мира).
Синтаксис:
/* 1. Определяем элемент input, в который будет производиться ввод информации */
<input id='auto' />
/* 2. Превращаем input в виджет autocomplete */
$('#auto').autocomplete({опция1:значение1,опцияN:значениеN})
Подключить к виджету список данных можно с помощью опции source.
С помощью опции minLength Вы можете указать минимальное количество символов, которое должно содержать поле ввода прежде, чем поиск совпадений начнет выполнятся.
-->
<!DOCTYPE html>
<html>
<head>
    <title>UI 2-2-1</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="css/jquery-ui.min.css">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script>
        $(function () {
            $("#auto1").autocomplete({ source: ["Дмитрий", "Мария", "Владимир", "Алексей", "Екатерина", "Олег", "Ольга"] });
        });
    </script>
</head>
<body>
    Введите имя: <input id="auto1">
</body>
</html>
READ ALSO
Bash. Заменить inline картинки в html на внешние файлы
HTML

Bash. Заменить inline картинки в html на внешние файлы

Есть файл с htmlНа самом деле это вообще дамп базы mysql

 238
Автозаполнение полей на сайте с помощью chrome extension
HTML

Автозаполнение полей на сайте с помощью chrome extension

Есть сайт adidasru, я хочу написать под него расширение для хрома, которое бы само заполняло форму заказа товара

 304
перехватить iframe клик
HTML

перехватить iframe клик

Имеется простенькая верстка, которую даже приводить смысла нет, див, в который при помощи innerHTML дописывается iframe - в этом элементе лежит ютуб-видео(берется...

 274
Owl carousel Как скрывать стрелочки навигации при отсутствии цикла
CSS

Owl carousel Как скрывать стрелочки навигации при отсутствии цикла

Как в Owl carousel скрывать стрелочки следующего/предыдущего слайда при отсутствии бесконечного цикла ?

 479