Question

我有3个输入字段，1个用于数据类型，其他2个是相关的。当我按下数据类型字段中的按钮时，我想显示像此

这样的自动完成窗口

而不是

选择后应该看起来像这样

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

您需要更改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

我在演示时遇到问题。输出结果如下所示：是您想要的东西吗？

<!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

内部成功功能中，您需要按照以下示例形成“ GL446-卡车-4轮”之类的标签并将其值设置为“ 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]

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

3 个答案: