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

时间:2014-05-08 22:38:23

标签: javascript jquery jquery-ui jquery-autocomplete

我想对jQuery自动填充结果as in the documentation进行分类,但我还想限制每个类别中的结果数量。我了解如何使用an if statementslice限制结果的数量,但我无法弄清楚如何将它们与类别功能结合使用。

说我的数据如下:

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

......接着是:

PEOPLE: #1人...

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

1 个答案:

答案 0 :(得分:2)

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/处尝试。