jQuery自動完成動態ajax
[英]jQuery autocomplete dynamic ajax
問題描述
我正在嘗試使用自動完成功能構建搜索輸入。 但是，建議取決於輸入，並且不是靜態的-這意味着每次用戶在字段中鍵入內容時，我都必須檢索列表。 這些建議基於Google的自動建議：“ http://google.com/complete/search?q=TERM&output=toolbar ”。
我目前正在使用http://easyautocomplete.com 。
這是我的代碼：
var array = [];
var options = {
data: array
};
$("#basics").easyAutocomplete(options);
$("#basics").on("keyup",function() {
var keyword = $(this).val();
array = [];
updateSuggestions(keyword);
});
function updateSuggestions(keyword) {
$.ajax({
type: "POST",
url: "{{ path('suggestKeywords') }}",
data: {keyword:keyword},
success: function(res){
var res = JSON.parse(res);
for(var i in res)
{
var suggestion = res[i][0];
array.push(suggestion);
console.log(suggestion);
}
}
});
var options = {
data: array
};
$("#basics").easyAutocomplete(options);
}
我知道這不是執行此操作的好方法-那么您對如何執行操作有任何建議嗎？
1 個解決方案
解決方案1
0 2015-12-12 15:48:52
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete functionality</title> <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <!-- Javascript --> <script> $(function() { var availableTutorials = [ "ActionScript", "Boostrap", "C", "C++", ]; $("#automplete-1").autocomplete({ source: availableTutorials }); }); </script> </head> <body> <!-- HTML --> <div class="ui-widget"> <p>Type "a" or "s"</p> <label for="automplete-1">Tags:</label> <input id="automplete-1"> </div> </body> </html>
使用jquery ajax中的動態數據實現自動完成
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.