如何限制jQuery UI Autocomplete的自动补全结果数量？

嘿，这个需求太常见了，咱有两种靠谱的实现方式，根据你的场景选就行：

方法一：后端接口限制（推荐） #

这是最优解，毕竟从源头控制返回的数据量，既省带宽又高效。你的自动补全数据源是/companySearch接口，只需要在后端处理搜索逻辑的时候，限制返回结果的条数（比如最多10条）就行。

如果你的后端支持接收参数（比如Laravel/PHP、Node.js这类框架都很容易实现），还可以让前端主动传递限制数量：

1. 把前端的source从直接的URL改成自定义函数，用来携带参数请求：

source: function(request, response) {
  $.getJSON('{{ url("/companySearch") }}', {
    term: request.term, // 用户输入的关键词
    limit: 10 // 这里设置你想要的最大结果数
  }, function(data) {
    response(data);
  });
}

2. 后端接口拿到limit参数后，在查询数据库时只返回对应数量的结果（比如Laravel里用->take($limit)，MySQL里用LIMIT语法）。

方法二：前端截断结果（后端没法调整时用） #

如果后端接口暂时没法修改，咱也可以在前端拿到所有结果后，手动截断到指定数量。同样需要把source改成自定义函数：

source: function(request, response) {
  $.getJSON('{{ url("/companySearch") }}', { term: request.term }, function(data) {
    // 截断数组，只保留前10条
    const limitedData = data.slice(0, 10);
    response(limitedData);
  });
}

整合到你的代码里 #

替换掉原来的source: '{{ url("/companySearch") }}'，改成上面任意一种方式即可。以下是完整修改后的代码示例（以后端带参数的方案为例）：

$(document).ready(function() { 
  $("#company").autocomplete({ 
    autoFocus: true, 
    // 替换原source为自定义函数
    source: function(request, response) {
      $.getJSON('{{ url("/companySearch") }}', {
        term: request.term,
        limit: 10 // 设置最大结果数
      }, function(data) {
        response(data);
      });
    },
    minLength: 2, 
    select: function(event, ui) { 
      event.preventDefault(); 
      $("#company").val(ui.item.label); 
      if (ui.item.label == 'Other') { 
        $("#othercompany").show(); 
      } 
      $('#company').val(''); 
      $("#multipleAutoComplete").append('<div class="remvcomapny_' + ui.item.key + ' companycls"><p>' + ui.item.label + '</p><input type="hidden" name="companykeys[]" value="' + ui.item.key + '" ><a href="javascript:void(0);" onclick="removeCompanyName(\'' + ui.item.key + '\')"><i class="fa fa-times"></i></a></div>').show(); 
    }, 
    focus: function(event, ui) { 
      event.preventDefault(); 
    }, 
    open: function(event, ui) { 
      $(this).autocomplete("widget") 
        .appendTo("#results").css({ 'position': 'static', 'width': '100%' }); 
      $('.ui-autocomplete').css('z-index', '9999999'); 
      $('.ui-autocomplete').addClass('srchuser-dropdown'); 
    } 
  }).data("ui-autocomplete")._renderItem = function(ul, item) { 
    return $("<li style='height:60px;'><span class='srchuser-downname'>" + item.label + '</span></li>').data("ui-autocomplete-item", item).appendTo(ul); 
  }; 
});

小提醒：如果用前端截断的方式，哪怕后端返回的结果本来就少于限制数量，slice方法也不会出错，完全安全~

内容的提问来源于stack exchange，提问作者Aiswarya Suresh