限制 ajax 自动完成结果

Posted 2023-02-24

【中文标题】限制 ajax 自动完成结果

【英文标题】：Limit ajax autocomplete results

【发布时间】：2018-07-24 05:18:02

【问题描述】：

鉴于数据不是本地数据，您如何限制搜索结果的数量。我知道本地数据很容易被限制，如下所示。

source: function(request, response) 
    var results = $.ui.autocomplete.filter(myarray, request.term);

    response(results.slice(0, 10));`

当我从外部获取数据时，这不是很好。下面是我的代码。

 $(function() 
  $("#search").autocomplete(
    source: "/accounts/ajax/search/",
    minLength: 2,
    select: function(event, ui )
        window.open(ui.item.url,'_self'),
    open: function(event, ui) 
        $('.ui-autocomplete').append("<li><a class = \" text-primary\" href='javascript:document.getElementById(\"search_form\").submit();'> See All Result </a></li>");
         ,
  );
);

【问题讨论】：

最有效的方法是限制结果服务器端。

您的source 似乎缺少一些关键代码....您所做的只是覆盖一些变量？请求在哪里？您应该能够像在第一个示例中所做的那样对结果进行切片（假设您不能在服务器端进行）。

小错误，刚刚编辑了我的帖子。

【参考方案1】：

您必须自己发出 ajax 请求并将有限的结果传递给响应回调。

默认情况下，当 source 为字符串时，对提供的字符串发出 GET 请求，参数名称为 term 并为输入值赋值。所以你必须重现这个：

$( "#autocomplete" ).autocomplete(
    source: function( request, response ) 
          $.get('/accounts/ajax/search/',  term: request.term, function(results) 
               response(results.slice(0, 10));
          );
      
);

【参考方案2】：

您可以替换value for source with a function，然后手动进行ajax请求和结果处理：

$(function() 
  $("#search").autocomplete(
    source: function(request, response) 
      $.get("/accounts/ajax/search?term=" + request.term, function(data) 
        //limit results here
        response(data.slice(0, 10));
      );
    ,
    ...
  );
);