JSON不起作用的Jquery UI自动完成
嘿,伙计们,我想弄明白为什么在源代码末尾添加变量时,JSON不起作用的Jquery UI自动完成,jquery,ajax,json,jquery-ui,jquery-ui-autocomplete,Jquery,Ajax,Json,Jquery Ui,Jquery Ui Autocomplete,嘿,伙计们,我想弄明白为什么在源代码末尾添加变量时,autocomplete()方法没有执行GET。例如: <script> $(document).ready(function(){ var search_input; $('#search').keyup(function(){ search_input = ($(this).val()); console.log(search_i
autocomplete()
方法没有执行GET
。例如:
<script>
$(document).ready(function(){
var search_input;
$('#search').keyup(function(){
search_input = ($(this).val());
console.log(search_input);
});
$('#search').autocomplete({
source: "http://192.168.33.10/app_dev.php/search/query/" + search_input,
minLength: 2
});
});
</script>
<div class="ui-widget">
<label for="search">Search</label>
<input type="text" id="search" />
</div>
即使您正在更改
search\u input
,小部件也只获取初始值为search\u input
(可能为空)的URL
你需要这样的东西:
$('#search').autocomplete({
source: function (request, response) {
$.get("http://192.168.33.10/app_dev.php/search/query/" + request.term, response)
},
minLength: 2
});
在代码中,
autocomplete
函数只需要为源参数提供回调函数<代码>来源:函数(请求、响应){}
你可以按照这个例子来学习
非常感谢。我在下拉列表中得到了正确的JSON响应,但是格式很奇怪。它实际上是从JSON中提取每个字符,尽管包括[{:"键一次命名一个字符。你知道为什么吗?你能提供一个服务的示例响应吗?你也可以尝试使用
getJSON
instead。我还有一个问题。我想用这样的标签对搜索结果进行分类。我不知道如何将这些代码集成到你提供的工作代码中D
$('#search').autocomplete({
source: function (request, response) {
$.get("http://192.168.33.10/app_dev.php/search/query/" + request.term, response)
},
minLength: 2
});
<script type="text/javascript">
$(function() {
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#search" )
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "ui-autocomplete" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
source: function( request, response ) {
$.getJSON( "http://192.168.33.10/app_dev.php/search/query/" + extractLast( request.term ), {
term: extractLast( request.term )
}, response );
},
search: function() {
// custom minLength
var term = extractLast( this.value );
if ( term.length < 2 ) {
return false;
}
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( ", " );
return false;
}
});
});
</script>
[{"id":"1544","label":"Suggestion 1","value":"Suggestion 1"},
{"id":"3321","label":"Suggestion 2","value":"Suggestion 2"}]