我目前有一个使用UI自动完成功能的代码,似乎显示了我从mysql数据库获得的正确数据。现在我想通过能够接受多于1个值来使事情复杂化。我上下搜索了互联网,仍然无法修复我的代码以便工作,我是jquery的新手,特别是自动完成。这是我到目前为止所拥有的......
$('#companyautocomplete').autocomplete({
source: function(request, response) {
//separator: ' ',
$.ajax({
url: "company_search.php",
dataType: "json",
data: {
name_startsWith: request.term,
term: $('#companyautocomplete').val(),
},
success: function(data) {
response($.map(data, function(item) {
return {
compid: item.compid,
label: item.value + ' (' + item.address + ', ' + item.city + ', ' + item.state + ', ' + item.zipcode + ')',
value: item.value,
address: item.address + ', ' + item.city + ', ' + item.state + ', ' + item.zipcode,
phone: item.phone,
problematic: item.problematic
}
}))
},
});
},
select: function(event, ui) {
$('#companyautocomplete').val(ui.item.value);
$('#companyid').val(ui.item.compid);
$('#c_address').val(ui.item.address);
$('#c_phone').val(ui.item.phone);
if (ui.item.problematic!=1){
$('#companyautocomplete').removeClass("ui-autocomplete-error");
document.getElementById('Sendbutton').style.display="block";
} else {
$('#companyautocomplete').addClass("ui-autocomplete-error");
document.getElementById('Sendbutton').style.display="none";
}
}
});
这是我从company_search.php ...
得到的回复[{"compid":"36","value":"MCDONALD OF ALL SAINTS RD","address":"9261 all saints rd","phone":"","problematic":"0","zipcode":"20723","city":"Laurel","state":"MD","completeaddress":"9261 all saints rd, Laurel, MD, 20723"},{"compid":"37","value":"MCDONALD OF BOWIE","address":"4306 nw CRAIN HWY","phone":"","problematic":"0","zipcode":"20716","city":"Bowie","state":"MD","completeaddress":"4306 nw CRAIN HWY, Bowie, MD, 20716"}]
到目前为止,这一切都按照我想要的方式运行,但它不接受超过1个值,我怎样才能实现这个目标?在此先感谢!!
答案 0 :(得分:7)
最后我找到了解决问题的答案!! 这是使用多个值/输入的最终代码,用于从远程mysql DB获取响应。
$(function() {
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#companyautocomplete" )
// 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( "autocomplete" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
source: function( request, response ) {
$.getJSON( "company_search.php",{
term: extractLast( request.term )},
function( data ) {
response( $.map( data, function( item ) {
return {
compid: item.compid,
label: item.value + ' (' + item.address + ', ' + item.city + ', ' + item.state + ', ' + item.zipcode + ')',
value: item.value,
address: item.address + ', ' + item.city + ', ' + item.state + ', ' + item.zipcode,
phone: item.phone,
problematic: item.problematic
}
}));
}
);
},
search: function() {
// custom minLength
var term = extractLast(this.value);
if (term.length < 3) {
return false;
}
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
$('#companyautocomplete').val(ui.item.value);
$('#companyid').val(ui.item.compid);
$('#c_address').val(ui.item.address);
$('#c_phone').val(ui.item.phone);
if (ui.item.problematic!=1){
$('#companyautocomplete').removeClass("ui-autocomplete-error");
document.getElementById('Sendbutton').style.display="block";
} else {
$('#companyautocomplete').addClass("ui-autocomplete-error");
document.getElementById('Sendbutton').style.display="none";
}
}
});
});
现在它就像一个魅力。我希望这有助于其他人寻找答案。