Я пытаюсь создать ввод тега начальной загрузки с удаленного источника (получить теги с сервера). Когда я использую синхронный запрос - он прекрасно работает, но экран останавливается на некоторое время после нажатия каждой буквы, ожидая завершения AJAX. И чем меньше скорость интернет-соединения у пользователя, тем больше экран зависает.
Я пытался использовать документацию https://bootstrap -tagsinput.github.io / bootstrap-tagsinput / examples / но там используется Bloodhound, и я пытался справиться с этим в течение нескольких часов, но нет шанс. Поэтому я просто решил использовать typeaheadjs.
Мой код jQuery выглядит так:
obj.tagsinput({
tagClass: function (item) {
return 'cf-tag-' + item.color;
},
itemValue: 'id',
itemText: 'name',
typeaheadjs: function(query, process = false) {
tagsFinal = [];
$.ajax({
url: tagsInputArgs.ajaxUrl,
async: false,
data: {
'action': 'get_budget_tags',
'security': tagsInputArgs.security,
'budget_id': $('.budget_id').val(),
'query': query
},
type: 'GET',
cache: true,
success: function (data) {
tagsFinal = data;
if (process)
process(data);
}
});
//process(tagsFinal);
return tagsFinal;
}
});
JSON, который я получаю с сервера:
[
{
"id":"75",
"budget_id":"91",
"name":"electronic",
"color":"cyan"
}
]
Работает, если для async установлено значение false. Если я переверну это, независимо от того, сколько и где я обработаю данные - никакого автозаполнения вообще не будет. Я пытался использовать $ .get (), но безрезультатно.
Ожидаемый результат - получить тот же ввод тегов автозаполнения, но без зависания экрана (возможно, автозаполнение появится с некоторой задержкой, но все равно будет лучше).