autocomplete 在自动完成中显示相关数据 window

Question

我有 3 个输入字段，1 个用于数据类型，另外 2 个与其相关。当我在数据类型字段中按下按钮时，我想像这样显示自动完成 window

而不是这个

在 select 之后应该是这样的

HTML

<tr>
   <td><input type="text" id="no_1" class="form-control"></td>            
   <td><input type="text" data-type="vehicle" id="vehicle_1" class="type form-control"></td>
   <td><input type="text" id="type_1" class="form-control"></td>
</tr>

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

在 success 函数中，您需要按照以下示例形成标签 'GL446 - truck - 4 wheel' 和值 'truck' -

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]

Answer 2

我的演示文稿有问题。输出如下所示：是你想要的吗？

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <style>

  </style>
<body>

<h1>The onclick Event</h1>

<p>The onclick event is used to trigger a function when an element is clicked on.</p>
<table>
<tr>
   <td>no:</td>            
   <td><label for="search">vehicle: </label></td>
   <td>type:</td>
</tr>
<tr>
   <td><input type="text" id="no_1" class="form-control"></td>            
   <td><input type="text" data-type="vehicle" id="search" class="type form-control"></td>
   <td><input type="text" id="type_1" class="form-control"></td>
</tr>
</table>




<script>
$(document).on('focus','.type',function(){
 type = $(this).data('type');
 if(type =='vehicle' )autoTypeNo = 1;   
 //$(this).autocomplete({
 $.widget( "custom.catcomplete", $.ui.autocomplete, {
     _renderMenu: function( ul, items ) {
    var that = this;
    $.each( items, function( index, item ) {
     //here you modify the presentation of the label
     item.label=item.no + " - " + item.label + " - " + item.category;
     that._renderItemData( ul, item );
    });
     }
   });

  var data = [
    { no:"GL-446", label: "truck", category: "4 wheel" },
    { no:"GL-446",label: "andreastr", category: "4 wheel" },
    { no:"GL-446",label: "antaltr", category: "4 wheel" },
    { no:"GL-446",label: "annhhx10tr", category: "Products" },
    { no:"GL-446",label: "annk K12tr", category: "Products" },
    { no:"2A corsica",label: "annttop C13tr", category: "Products" },
    { no:"GL-446",label: "anders anderssontr", category: "People" },
    { no:"GL-446",label: "andreas anderssontr", category: "People" },
    { no:"GL-446",label: "andreas johnsontr", category: "People" }
  ];
  
 $( "#search" ).catcomplete({
    delay: 0,
    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: trunk,
        value: 10,
        data : 2
       }
      }));
     }
    });
   },*/
   data,
   //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]);*/
    if(ui.item) { 
     $( "#no_1" ).attr('value',ui.item.no);
     $( "#type_1" ).attr('value',ui.item.category);
    }
   }
    });

});



</script>

</body>
</html>

Answer 3

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

这是您更新后的 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);
    }              
 });
});

autocomplete 在自动完成中显示相关数据 window

autocomplete display relevant data in autocomplete window

javascript

jquery

autocomplete

autocompletetextview

jquery-ui-autocomplete