1

与地图一起使用时限制 ui.autocomplete 结果的正确方法是什么？

我在这里发现了适用于简单数组的解决方案的类似问题：Limit results in jQuery UI Autocomplete 但是我的数组有点嵌套，除了源是外部的。

我还在这里测试了另一个未定义错误的解决方案：jquery autocomplete limit results

以下是我从链接中改编的内容，但没有成功。

我的测试：

var sourceUrl = '/path/to/products.json';
$("#auto").autocomplete({
        source: function (request, response) {        
          $.getJSON(sourceUrl, {term: request.term}, function (result) {
                response($.map(result.products, function (item) {
                   var myarray = item.product;
                   console.log(myarray); // the returns look expected (Product One, Product Two, etc)
                   var results = $.ui.autocomplete.filter(myarray, request.term);
                   results.slice(0, 10);
                }));                
          });
        }
});

产品.json：

{"products": [{"label": "Product One", "product": "Product One", "sku": "12345"},    ...

简单地输出所有产品会更容易，但它们只是很多/很重的下拉菜单。这就是为什么我需要限制结果。

非常感谢任何提示。谢谢。

4

1 回答 1

4

从文档中，$.map()

该函数可以返回：

  • 翻译后的值，将映射到结果数组
  • null 或未定义，删除项目
  • 一组值，将被展平为完整的数组

如果你想坚持使用地图，你可以添加一个条件来限制你的结果。

$.map(result.products, function (item, i) {
    if(i>9){
        return null
    }
}

在这里要清楚的重要一点是，当您处理整个数组以及仅接触一个元素时。var myarray = item.product;让我担心。为什么每个结果都是一个数组？您可以发布来自 sourceUrl 的 JSON 响应吗？

理想情况下，sourceUrl 返回一个数组，$.map用于将每个元素转换为所需的形式。通常这些元素是对象，而不是数组。因此，在您提供给映射的回调内部不应该谈论数组或过滤事物。这需要在循环之外完成。

编辑评论：

如果您的源是静态文件，我建议只将其引入一次，而不是让用户每次在自动完成字段中键入内容时都重新下载它。像下面这样的东西可能是一个更好的主意。

var sourceData;
$.getJSON('/path/to/products.json', function (result) {
    sourceData = $.map(result.products,function(product){
        return product.product;
    });
});

$("#auto").autocomplete({
        source: sourceData
});

当然，此时您必须问自己文件是单独文件是否有特定原因，或者为什么它不是 JS 包含。

于 2012-05-27T03:21:28.710 回答