Javascript jQuery UI自动完成值在选择中未正确显示
我的源代码是从url获取的JSON对象,如下所示Javascript jQuery UI自动完成值在选择中未正确显示,javascript,jquery-ui,laravel-5,jquery-ui-autocomplete,Javascript,Jquery Ui,Laravel 5,Jquery Ui Autocomplete,我的源代码是从url获取的JSON对象,如下所示 [ {"ID":1,"GROUP_ID":"1","CONTACTNAME":"Mizuki","PHONENUMBER":"+6289695049930"}, {"ID":15,"GROUP_ID":"3","CONTACTNAME":"Sinbad","PHONENUMBER":"+6287654321"}, {"ID":23,"GROUP_ID":"","CONTACTNAME":"Titus","PHONENUMB
[
{"ID":1,"GROUP_ID":"1","CONTACTNAME":"Mizuki","PHONENUMBER":"+6289695049930"},
{"ID":15,"GROUP_ID":"3","CONTACTNAME":"Sinbad","PHONENUMBER":"+6287654321"},
{"ID":23,"GROUP_ID":"","CONTACTNAME":"Titus","PHONENUMBER":"+6255555555"}
];
当用户输入时,建议的结果是CONTACTNAME,插入搜索框的值是PHONENUMBER。从源/url获取数据没有问题,但在searchbox中没有传递值
下面是截图
这是我的剧本
$(function() {
$( "#contact" ).autocomplete({
source: "api/contact/auto",
minLength: 1,
focus: function( event, ui ) {
$("#contact").val(ui.item.CONTACTNAME);
return false;
},
select: function( event, ui ) {
$("#contact").val(ui.item.PHONENUMBER);
return false;
}
});
});
窗体视图
<input type="text" v-model="message.DESTINATIONNUMBER" id="tags" class="form-control" name="destinationNumber" >
我尝试删除仍然相同的vue代码段(v-model)
有什么建议吗?怎么了
已更新强>
我的错误。忘记在末尾添加此代码
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};
.autocomplete(“实例”)。\u renderItem=函数(ul,项目){
返回$(“”)
.append(“+item.label+”
“+item.desc+”)
.附录(ul);
};
因此,完整的javascript与jQueryUI文档中的一样
$(function() {
$( "#contact" ).autocomplete({
source: "api/contact/auto",
minLength: 1,
focus: function( event, ui ) {
$("#contact").val(ui.item.CONTACTNAME);
return false;
},
select: function( event, ui ) {
$("#contact").val(ui.item.PHONENUMBER);
return false;
}
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};
});
$(函数(){
$(“#联系人”).autocomplete({
资料来源:“api/contact/auto”,
最小长度:1,
焦点:功能(事件、用户界面){
$(“#contact”).val(ui.item.CONTACTNAME);
返回false;
},
选择:功能(事件、用户界面){
$(“#联系人”).val(ui.item.PHONENUMBER);
返回false;
}
})
.autocomplete(“实例”)。\u renderItem=函数(ul,项){
返回$(“”)
.append(“+item.label+”
“+item.desc+”)
.附录(ul);
};
});
谢谢那些试图帮助我的人。非常感谢。要使自动完成工作,您需要在返回的JSON数组中具有“label”属性。您可以在服务器端对其进行更改,也可以在客户端对其进行如下转换:
$( "#contact" ).autocomplete({
source: function (request, response) {
$.ajax({
url: "api/contact/auto",
data: { query: request.term },
success: function (data) {
var transformed = $.map(data, function (el) {
return {
label: el.CONTACTNAME,
value: el.PHONENUMBER,
id: el.ID
};
});
response(transformed);
},
error: function () {
response([]);
}
});
});
minLength: 1,
focus: function( event, ui ) {
$("#contact").val(ui.item.CONTACTNAME);
return false;
},
select: function( event, ui ) {
$("#contact").val(ui.item.PHONENUMBER);
return false;
}
});
要使自动完成工作,您需要在返回的JSON数组中具有“label”属性。您可以在服务器端对其进行更改,也可以在客户端对其进行如下转换:
$( "#contact" ).autocomplete({
source: function (request, response) {
$.ajax({
url: "api/contact/auto",
data: { query: request.term },
success: function (data) {
var transformed = $.map(data, function (el) {
return {
label: el.CONTACTNAME,
value: el.PHONENUMBER,
id: el.ID
};
});
response(transformed);
},
error: function () {
response([]);
}
});
});
minLength: 1,
focus: function( event, ui ) {
$("#contact").val(ui.item.CONTACTNAME);
return false;
},
select: function( event, ui ) {
$("#contact").val(ui.item.PHONENUMBER);
return false;
}
});
您的JavaScript中有几个错误:
- “来源”拼写错误(“sorGce”)
- 在除0之外的availableTags索引中,冒号位于引号内,而不是引号外
sorGce: availableTags, -> source: availableTags,
"ID:" "23", -> "ID": "23",
不确定这是否是问题的根本原因,但它可能会帮助您修复小提琴。您的JavaScript中有几个错误:
- “来源”拼写错误(“sorGce”)
- 在除0之外的availableTags索引中,冒号位于引号内,而不是引号外
sorGce: availableTags, -> source: availableTags,
"ID:" "23", -> "ID": "23",
不确定这是否是您的问题的根本原因,但它可能会帮助您修复小提琴。您能创建一个吗?@NoyGabay呃,对不起,我会试试。因为我的应用程序是用laravel构建的。@NoyGabay在这里试试根本不起作用,我是JSFIDLE的新手:(你能创建一个吗?@NoyGabay嗯,对不起,我会试试。因为我的应用程序是用laravel构建的。@NoyGabay在这里试试根本不起作用,我是JSFIDLE的新手:(谢谢你已经尝试帮助了。我发现了错误并更新了我的问题:)谢谢您的帮助。我发现了错误并更新了我的问题:)