[英]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);
}
我知道这不是执行此操作的好方法-那么您对如何执行操作有任何建议吗?
<!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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.