Javascript jQuery UI-多个自动完成-结果不一致
我有以下Javascript jQuery UI-多个自动完成-结果不一致,javascript,jquery,jquery-ui,autocomplete,Javascript,Jquery,Jquery Ui,Autocomplete,我有以下tags.json文件: [ {"label" : "Aragorn"}, {"label" : "Arwen"}, {"label" : "Bilbo Baggins"}, {"label" : "Boromir"} ] 和以下javascript代码(相同): $(函数(){ 功能拆分(val){ 返回val.split(/,\s*/); } 功能提取最后(学期){ 返回拆分(term.pop()
tags.json
文件:
[
{"label" : "Aragorn"},
{"label" : "Arwen"},
{"label" : "Bilbo Baggins"},
{"label" : "Boromir"}
]
和以下javascript代码(相同):
$(函数(){
功能拆分(val){
返回val.split(/,\s*/);
}
功能提取最后(学期){
返回拆分(term.pop();
}
$(“#人”)//与演示不同
//选择项目时不要离开选项卡上的字段
.bind(“键控”,函数(事件){
如果(event.keyCode===$.ui.keyCode.TAB&&
$(此).data(“ui自动完成”).menu.active){
event.preventDefault();
}
})
.自动完成({
来源:功能(请求、响应){
$.getJSON('tags.json',{//DIFF FROM DEMO
期限:extractLast(request.term)
},回应);
},
搜索:函数(){
//自定义最小长度
var项=提取时间(此值);
如果(术语长度<2){
返回false;
}
},
焦点:函数(){
//防止在焦点上插入值
返回false;
},
选择:功能(事件、用户界面){
var术语=分割(此值);
//删除当前输入
terms.pop();
//添加所选项目
术语推送(ui.item.value);
//添加占位符以在末尾获得逗号和空格
术语。推送(“”);
this.value=terms.join(“,”);
返回false;
}
});
});
但当我在输入框中键入例如:“
ar
”时,我会得到Aragorn、Arwen、Bilbo Baggins
和Boromir
。我不明白为什么结果中有Bilbo
和Boromir
?我应该只得到Aragorn
和Arwen
,因为这些字符串包含“ar”字符串…问题是在jQuery示例中,$.getJSON()
函数调用一些服务器端脚本,该脚本使用术语参数进行操作,即过滤名称。在您的例子中,tags.json
文件按原样返回,其中包括所有结果。如果您希望基于某些内容(例如输入的术语)过滤结果,则需要在调用response(当前是$.getJSON()
函数的回调)之前应用该过滤
<script>
$(function() {
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#people" ) //DIFF FROM DEMO
// 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( 'tags.json', { //DIFF FROM DEMO
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>