Bootstrap 4 Typeahead
Я использую jQuery Bootstrap Typeahead. Я получаю данные из своего файла, но выпадающий список не отображается / не отображается.
Вот мой JS:
(function() {
"use strict";
var $input = $('.typeahead');
$('.typeahead').typeahead({
source: function (query, process) {
return $.getJSON(
'url-to-file.php',
{ query: query },
function (data) {
console.info(data)
return process(data);
})
}
});
})();
console.info() возвращает (правильный) массив JSON:
[ "item1", "item2", ... ]
Но я не знаю, что делать после. Спасибо за помощь
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Источник данных должен быть ...
[{name:"item1","id":"1"},{name:"item2","id":"2"},etc..]
А затем используйте data-provide на таком входе ...
<div class = "input-group">
<input type = "text" data-provide = "typeahead" class = "form-control typeahead border-primary" name = "query" id = "query" placeholder = "search..." autocomplete = "off">
</div>
Рабочая демонстрация на Codeply
Редактировать: Вы также можете использовать простой строковый массив: https://www.codeply.com/go/knBpcbhlFE
В основном это будет работать так же, как описано здесь: stackoverflow.com/questions/18710325/…
Примеры кода на стенде не работают для меня в FireFox (65.0.5), но работают в Chrome
Ссылки у меня работают, и кроме того, в ответе есть соответствующий код. Почему вы проголосовали против этого? @SergeyRomanov
Потому что все ссылки были 404 в то время, как пример, больше не существует. Теперь все работает нормально. Я хотел проголосовать, но это не позволяет мне, пока сообщение не будет отредактировано. Простите. Скорее всего, это была проблема с codeply. Потому что ошибка 404 была не браузером, а их. Стили как codeply not found repo.
На самом деле ваш пример работает нормально, но он загружает данные json напрямую. Моя цель состоит в том, чтобы каждый раз, когда пользователь нажимает клавишу, в моей базе данных выполнялся запрос, который искал запрос, а затем возвращал данные json. Я согласен с этим, но после того, как я не знаю, как вводить / заполнять раскрывающийся список.