我有3个输入字段,1个用于数据类型,其他2个是相关的.
当我按下数据类型字段中的按钮时,我想显示像这个的自动完成窗口
而不是这个
选择之后应该看起来像这样
HTML
JS
$(document).on('focus','.type',function(){
type = $(this).data('type');
if(type =='vehicle' )autoTypeNo = 1;
$(this).autocomplete({
source: function( request,response ) {
$.ajax({
url : 'autocomplete.PHP',dataType: "json",method: 'post',data: {
name_startsWith: request.term,type: type
},success: function( data ) {
response( $.map( data,function( item ) {
var code = item.split("|");
return {
label: code[autoTypeNo],value: code[autoTypeNo],data : item
}
}));
}
});
},autoFocus: true,minLength: 0,select: function( event,ui ) {
var names = ui.item.data.split("|");
id_arr = $(this).attr('id');
id = id_arr.split("_");
$('#no_'+id[1]).val(names[0]);
$('#vehicle_'+id[1]).val(names[1]);
$('#type_'+id[1]).val(names[2]);
}
});
});
最佳答案
您需要更改autocomplete.PHP然后返回所有3个值,您可以在json数组中轻松执行此操作http://php.net/manual/en/function.json-encode.php然后读取jquery脚本中的值.
这是您更新的JS脚本
$(document).on('focus',function( item ) {
//var code = item.split("|");
return {
label: item.no + '-' + item.vehicle + '-' + item.type,value: item.vehicle,ui ) {
//var names = ui.item.data.split("|");
id_arr = $(this).attr('id');
id = id_arr.split("_");
$('#no_'+id[1]).val(ui.item.data.no);
$('#vehicle_'+id[1]).val(ui.item.data.vehicle);
$('#type_'+id[1]).val(ui.item.data.type);
}
});
});
猜你在找的jQuery相关文章