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

Question

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

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

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

Answer 1

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

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

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

您可以向 source 参数提供一个函数，然后调用 对过滤后的数组进行切片。

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

Answer 2

您可以将 minlength 选项设置为某个大值，也可以通过这样的 css 来实现，

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

Answer 3

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

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

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

Answer 4

添加到 Andrew 的答案，您甚至可以引入一个 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/

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

Answer 5

这是我使用的

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

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

Answer 6

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

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

Answer 7

如果结果来自 mysql 查询，则直接限制 mysql 结果会更有效：

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

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

Answer 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
}
}
));

Answer 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
   }
});

Answer 10

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

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

Answer 11

我已经尝试了上面所有的解决方案，但我的只能以这种方式工作：

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

Answer 12

没有 max 参数。

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

Answer 13

就我而言，这工作得很好：

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

Answer 14

我将这个库留给使用此库的任何人

JavaScript-autoComplete/1.0.4/auto-complete.js

这可能会有所帮助，因为演示版本不显示如何限制结果。基于安德鲁的回应。

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));
     }
    });

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

Answer 15

.ui-menu-item{
    display: none;
}
.ui-menu-item:nth-child(-n+5){
    display: block;
}