ui-自动完成显示所有结果而不是筛选结果

Question

我只是尝试使用 jQuery 自动完成小部件作为实验。

我以此为例：自动完成 | APi数据

但是当我尝试时，它并没有过滤结果。它只在我输入内容然后 'backspace-it-all'

时显示所有结果

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>  
 <script>  
 $(function() {  
   $( "#name" ).autocomplete({  
     source: function( request, response ) {  
      $.ajax({  
        url: "https://nyros-ecommerce.myshopify.com/products.json",  
        dataType: "json",
        dataFilter: function (data) { return data; },
        success: function( data ) {  
            console.log(data)
            response( $.map( data.products, function( result ) {  
                return {                      
                    value: result.handle,  
                    imgsrc: result.images[0].src  
                }  
            }));  
        }  
    });  
     },
     minLength: 1,
     select : function(event, ui) {
         event.preventDefault();
         window.location.href = "/products/"+ui.item.value;
    }

   }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {  
    console.log(item.value)
       return $( "<li></li>" )  
           .data( "item.ui-autocomplete", item.value )  
           .append( "<a>" + "<img style='width:50px;height:55px' src='" + item.imgsrc + "' /> " + item.label+ "</a>" )  
           .appendTo( ul );  
   };  
 });  
 </script>  


<div class="ui">  
  <label for="name">producst search: </label>  
  <input id="name">  
</div>

Answer 1

您的代码的唯一问题是，您在函数中获取数据而不是过滤数据。

您只需使用以下行过滤您的数据。这里 final_data 只是您的结果输出。

response($.ui.autocomplete.filter(final_data, request.term));

试试下面的代码。

$(function() {  
   $( "#name" ).autocomplete({  
     source: function( request, response ) {  
      $.ajax({  
        url: "https://nyros-ecommerce.myshopify.com/products.json",  
        dataType: "json",
        dataFilter: function (data) { return data; },
        success: function( data ) {  
            var final_data =( $.map( data.products, function( result ) {  
                return {                      
                    value: result.handle,  
                    imgsrc: result.images[0].src  
                }  
            }));  
            response($.ui.autocomplete.filter(final_data, request.term));
        }  
    });  
     },
     minLength: 1,
     select : function(event, ui) {
         event.preventDefault();
         window.location.href = "/products/"+ui.item.value;
    }

   }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {  
       return $( "<li></li>" )  
           .data( "item.ui-autocomplete", item.value )  
           .append( "<a>" + "<img style='width:50px;height:55px' src='" + item.imgsrc + "' /> " + item.label+ "</a>" )  
           .appendTo( ul );  
   };  
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>  

<div class="ui">  
  <label for="name">producst search: </label>  
  <input id="name">  
</div>

ui-自动完成显示所有结果而不是筛选结果

ui-autocomplete showing all results instead of filtered results

javascript

jquery

jquery-ui