自动完成在自动完成窗口中显示相关数据

我有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]); } }); }); 

Answer 1

您需要更改autocomplete.php然后返回所有3个值，您可以在json数组中轻松地执行此操作http://php.net/manual/en/function.json-encode.php然后读取jquery脚本中的值。

这是您更新的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: item.no + '-' + item.vehicle + '-' + item.type, value: item.vehicle, 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(ui.item.data.no); $('#vehicle_'+id[1]).val(ui.item.data.vehicle); $('#type_'+id[1]).val(ui.item.data.type); } }); }); 

Answer 2

我有介绍问题。 输出看起来像这样： 这是你想要的吗？

         
The onclick Event
 
The onclick event is used to trigger a function when an element is clicked on.
 
 
 
no:
 
vehicle: 
 
type:
 
 
 
 
 
 
 
    

Answer 3

内部成功function，你需要形成像’GL446 – 卡车 – 4轮’和价值’卡车’的标签，如下例所示 –

http://jsfiddle.net/43aeh78L/2/

可能你的成功方法看起来像这样 –

 success: function( data ) { response( $.map( data, function( item ) { var code = item.split("|"); return { label: code[0] + "-" + code[1] + "-" + code[2], value: code[autoTypeNo], data : item } })); } 

编辑 ：我猜在响应函数内的item对象包含所有3个值，然后你可以将它们附加到形成标签字符串为 – code[0] + "-" + code[1] + "-" + code[2]