如何使用类别限制 jQuery 自动完成的结果？

Question

我想对 jQuery 自动完成结果as in the documentation 进行分类，但我也想限制每个类别中的结果数量。我了解如何使用an if statement 或slice 限制total 结果的数量，但我不知道如何将它们与类别功能结合使用。

假设我的数据如下所示：

var data = [
  { label: "Location #1", category: "city" },
  { label: "Location #2", category: "city" },
  { label: "Location #3", category: "city" },
        // ...more locations \\
  { label: "Location #25", category: "city" },
  { label: "Person #1", category: "people" },
  { label: "Person #2", category: "people" },
  { label: "Person #3", category: "people" },
        // ...more people  \\
  { label: "Person #25", category: "people" }
];

如果我使用上述方法之一将结果数限制为 5，这会影响总结果数，因此如果用户开始在搜索字段中输入“o”，他们将见：

城市： 位置 #1、位置 #2、位置 #3、位置 #4、位置 #5

但是，我想显示的是 5 个位置的限制和 5 个人：

城市： 位置 #1...位置 #5

...后跟：

人： 第 1 人...第 5 人

我的实际数据来自 CartoDB 中更复杂的 SQL 查询，但这里有一个简单的 JSFiddle 就足够了：http://jsfiddle.net/vqwBP/577/

Answer 1

Javascript Array.Filter 方法可以满足您的需求。谓词函数fn 必须跟踪每个类别的计数器，因此它被包装在维护此状态信息的闭包中。必须扩展 counter 对象以准确反映所有可能的类别（区分大小写）。

var predicate = function () {
    var counter = { city: 0, people: 0, elves: 0 };
    var fn = function(item) {
        counter[item.category] += 1;
        return (counter[item.category] <= 5);
    }
    return fn;
}();

response(results.filter(predicate));

试试http://jsfiddle.net/Cfp2N/3/。