Autocomplete form field

Question

I need to make a field that dynamically offers possible options as you type. I found a flexdatalist , and everything would be fine, but I can not previously insert data into the field - the script deletes everything.
Here is the part of the documentation that describes what I need. I do everything the same way as in the documentation, but it simply displays an empty field.
Part of the code:

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

Who worked with flexdatalist, tell me, what am I doing wrong, or what is an alternative to this (there must be support for choosing several values)?
How to be?

Have you checked if json is catching up at /json?get=diseases and is it valid?
In your solution, is it possible to send an object id when choosing its name from the list?
That is, if the data is in this format: "[{" id ": 1," name ":" Sergey "}, {" id ": 2," name ":" Vlad "}] and the object named Sergey is selected, then the unit should be sent to the server
I think there is no such solution out of the box, but what prevents you from creating a dictionary of matches id -> name, and if the user chose some name value, would it uniquely be mapped to an id bound to this name?

Vladimir Logvinov Vladimir Logvinov 89 3 · Answer 1 · 2017-11-22T15:34:08

 <!-- Виджет 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>

Autocomplete form field

1 answer 1

More articles: