在 jQuery UI 自动完成中限制结果

Posted 2023-03-05

【中文标题】在 jQuery UI 自动完成中限制结果

【英文标题】：Limit results in jQuery UI Autocomplete

【发布时间】：2011-11-28 20:43:30

【问题描述】：

我正在使用 jQuery UI 自动完成功能。

 $("#task").autocomplete(
     max:10,
     minLength:3,
     source: myarray
 );          

max 参数不起作用，我仍然得到超过 10 个结果。我错过了什么吗？

【问题讨论】：

自动完成中没有名为max的选项

【参考方案1】：

这是 jQueryUI 小部件的proper documentation。没有用于限制最大结果的内置参数，但您可以轻松完成：

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

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

您可以为source 参数提供一个函数，然后在过滤后的数组上调用slice。

这是一个工作示例： http://jsfiddle.net/andrewwhitaker/vqwBP/

【讨论】：

像魅力一样工作。如果您的自动完成列表很长（大约 10k 个结果）并且会减慢 html 渲染速度，这是否非常有用。

非常感谢您！现在我可以让用户在localStorage中拥有海量列表，但是网站感觉真的很快！迷人的！ :D 非常感谢你！ :D 很高兴我碰巧找到了这个解决方案 ^__^

如果一个页面上有两个自动完成框怎么办？当我对两者都进行响应切片时，两者都停止切片：/

这个解决方案+1。我将添加 minLength:3 以缩小结果范围。 jsfiddle.net/vqwBP/295

在 jsFiddle 提供的解决方案中，将切片值从 10 更改为 3，然后在输入框中输入字符 C。您只会收到 3 个值，最终用户可能会引导他们相信这些是唯一可用的三个值，可能不会继续输入字符。我的建议是提供很好的帮助文本来配合这个解决方案（例如，只会显示前 XX 个匹配的结果。继续输入以优化结果。”类似这些内容。

【参考方案2】：

您可以将minlength 选项设置为某个较大的值，或者您可以像这样通过 css 进行设置，

.ui-autocomplete  height: 200px; overflow-y: scroll; overflow-x: hidden;

【讨论】：

天才。我喜欢它的简单性，它让用户自己决定。

这很老套。如果你有一个很长的列表，并且自动完成会返回数千个匹配项，那将会非常缓慢......

同意瓦伊克。从可扩展性的角度来看，这是一个糟糕的解决方案。

同意瓦伊克。游戏是 JS 的时候不要玩 CSS。

我在我的字典应用程序中做了同样的事情。值得！

【参考方案3】：

就像“Jayantha”所说的使用 css 是最简单的方法，但这可能会更好，

.ui-autocomplete  max-height: 200px; overflow-y: scroll; overflow-x: hidden;

请注意，唯一的区别是“最大高度”。这将允许小部件调整到较小的高度，但不超过 200 像素

【讨论】：

因为你的解决方案。即使它是一个有效的，我们正在讨论 jQuery 解决方案。当问题可以通过 jQuery 解决时，向程序员提供 CSS 解决方案并不是一个好主意。最后，这只是掩盖了无法解决问题的结果，就像接受的答案一样。给你！

@SamBattat 使用 css 解决编程问题是一种可怕的 hack。想象一下尝试调试它！

【参考方案4】：

添加到Andrew's answer，您甚至可以引入 maxResults 属性并以这种方式使用它：

$("#auto").autocomplete( 
    maxResults: 10,
    source: function(request, response) 
        var results = $.ui.autocomplete.filter(src, request.term);
        response(results.slice(0, this.options.maxResults));
    
);

jsFiddle：http://jsfiddle.net/vqwBP/877/

这应该有助于代码的可读性和可维护性！

【参考方案5】：

这是我用的

.ui-autocomplete  max-height: 200px; overflow-y: auto; overflow-x: hidden;

溢出自动，因此滚动条在不应该显示时不会显示。

【参考方案6】：

我可以通过在我的 CSS 文件中添加以下内容来解决这个问题：

.ui-autocomplete 
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;

【讨论】：

请不要添加“谢谢”作为答案。它们实际上并没有提供问题的答案，并且可能被未来的访问者视为噪音。相反，upvote 会回答您喜欢的问题。这样，问题的未来访问者将看到对该答案的更高投票数，并且回答者也将获得声誉积分奖励。见Why is voting important。

这正是我想要的！不限制结果的数量，但限制显示项目的数量！谢谢

为什么这个答案的支持率这么低？有什么问题吗？为我工作，至少一见钟情。

【参考方案7】：

如果结果来自mysql查询，直接限制mysql结果效率更高：

select [...] from [...] order by [...] limit 0,10

其中 10 是您想要的最大行数

【讨论】：

每次鼠标启动都不好查询数据库！在某些服务器或大型数据库上可能会很慢。顺便说一句，我没有投反对票，而是写了这个解释。人们在投反对票时应该做什么。谢谢。

【参考方案8】：

我是通过以下方式做到的：

success: function (result) 
response($.map(result.d.slice(0,10), function (item) 
return 
// Mapping to Required columns (Employee Name and Employee No)
label: item.EmployeeName,
value: item.EmployeeNo


));

【参考方案9】：

jQuery 允许您在将自动完成附加到输入时更改默认设置：

$('#autocomplete-form').autocomplete(
   maxHeight: 200, //you could easily change this maxHeight value
   lookup: array, //the array that has all of the autocomplete items
   onSelect: function(clicked_item)
      //whatever that has to be done when clicked on the item
   
);

【参考方案10】：

插件： jquery-ui-autocomplete-scroll 带有滚动条和限制的结果很漂亮

$('#task').autocomplete(
  maxShowItems: 5,
  source: myarray
);

【参考方案11】：

我已经尝试了上述所有解决方案，但我的方法只适用于：

success: function (data) 
    response($.map(data.slice (0,10), function(item) 
    return 
    value: item.nome
    ;
    ));
,

【参考方案12】：

没有最大参数。

http://docs.jquery.com/UI/Autocomplete

【讨论】：

我从这个链接中看到了最大参数，docs.jquery.com/UI/Autocomplete/autocomplete 在选项菜单下

我在您的链接上没有看到任何“最大”参数。

【参考方案13】：

在我的情况下，这很好用：

source:function(request, response)
    var numSumResult = 0;
    response(
        $.map(tblData, function(rowData) 
            if (numSumResult < 10) 
                numSumResult ++;
                return 
                    label:          rowData.label,
                    value:          rowData.value,
                
            
        )
    );
,

【参考方案14】：

我要把这个留给任何使用这个库的人

javascript-autoComplete/1.0.4/auto-complete.js

这可能会有所帮助，因为演示版没有显示如何限制结果。基于 Andrew 的回复。

new autoComplete(
    selector: 'input[name="name_of_searchbox"]',
    minChars: 1,
    source: function(term, suggest)
    term = term.toLowerCase();
    var choices = [];
     var matches = []; //For Pushing Selected Terms to be always visible, can be adapter later on based on user searches
      for (i=0; i<choices.length; i++)
          if (~choices[i].toLowerCase().indexOf(term)) matches.push(choices[i]);
      suggest(matches.slice(0,10));
     
    );

希望这对任何人都有用。 干杯！