我在嘗試在輸入文本框中實作 JQuery-UI 自動完成下拉串列時遇到問題。下拉選單應該隨著每次擊鍵而更新。雖然從 url 端點檢索的資料陣列（機構）根據每次擊鍵的輸入正確更新，但自動完成功能似乎沒有正確更新其源，即自動完成似乎只是從初始陣列中過濾結果，而不是不斷更新的陣列。
這似乎與此處描述的問題相同：Jquery UI Autocomplete List does not refresh。例如，在第一次擊鍵時回傳一個資料陣列，下拉串列反映了這一點，但是隨著用戶輸入更多字符，自動完成功能僅根據進一步的輸入過濾初始陣列，而不是每次都更新其源。上面提到的執行緒和我的問題之間的區別在于，我從端點回傳的資料陣列確實更新正確，所以這不是套接字/后端問題，只是自動完成只使用初始陣列而不是更新陣列。
`
function establishmentSearch() {
$.ajax({
url : "{% url 'establishment-lookup' %}",
type : "GET",
data : {'term':$( "#autocompleteThis" ).val()},
success : function updateDropdown(data){
establishment_dict = {}
for (let i = 0; i < data.length; i ) {
establishment_dict[`${data[i]['label']}`] = data[i]['id']
}
establishments = $.map(establishment_dict, function(value, key) { return key });
console.log(establishments)
$("#autocompleteThis").autocomplete({source: establishments,
select: function( event, ui ) {
$( "#autocompleteThis" ).val(establishment_dict[ui.item.value])
$( "#est_id" ).val(establishment_dict[ui.item.key])
}})
},
dataType: 'json'
});
}
`
uj5u.com熱心網友回復：
考慮以下示例。
$("#autocompleteThis").autocomplete({
source: function(request, response) {
$.ajax({
url: "{% url 'establishment-lookup' %}",
type: "GET",
dataType: 'json',
data: {
'term': request.term
},
success: function(data) {
var results = [];
$.each(data, function(key, val) {
results.push({
'label': val.label,
'value': val.id
});
});
response(results);
}
})
},
select: function(event, ui) {
$("#autocompleteThis").val(ui.item.value);
$("#est_id").val(ui.item.label);
return false;
}
});
這應該在您的 Script 標頭中分配，而不是作為回呼。
在這里你可以看到，當 Autocomplete 被打開并且需要 Source 時，它??會進行 AJAX 呼叫。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/361005.html
標籤：查询 jquery-ui jquery-ui-自动完成