Javascript 在对象数组中像 SQL 一样按对象键搜索

Question

例如，我有一个这样的数组：

var arr = [
    {"keyword": "Sample 1", "item": {"title":"Sample Title", "url": "/sample"}},
    {"keyword": "Foo 1", "item": {"title":"Foo Title", "url": "/sample"}}
];

我想在“关键字”键中进行搜索，例如当用户从他们的输入中按下一个键并返回匹配的对象时。

如果用户按下“s”键，则首先是 [0]，元素必须返回。就像使用 SQL LIKE 语句一样。

$("#query").on('keypress', function () {
    var result = $.grep(keywords, function(e){
    //I do not know what should i do here.    
    });
});

Answer 1

如果你想使用$.grep，你可以这样做：

$("#query").on('keyup', function() {
    var search = this.value.toLowerCase();
    var result = $.grep(keywords, function(el) {
        return el.keyword.toLowerCase().indexOf(search) > -1;
    });
});

演示：http://jsfiddle.net/9TPSa/

另外请注意，我切换到keyup 事件以便能够读取更新的this.value。

Answer 2

使用Array.prototype.filter 方法：

Array.prototype.filterBy = function(attr, value) {
    return this.filter(function(elem){
        return elem[attr].indexOf(value) !== -1;
    });
}

然后arr.filterBy('keyword', '1') 将返回两个对象（在您的arr 数组中），而arr.filterBy('keyword', 'oo') 将只返回第二个。

DEMO

Answer 3

答案很简单：您必须遍历所有对象，查看每个 keyword 条目并确定它是否与您的搜索匹配。像这样的东西：

var results = [];
for (var i = 0 ; i < arr.length ; i++) {
    if (arr[i].keyword == "what ever you are looking for") {
        results.push(arr[i]);
    }
}

如果您只需要第一个匹配项（而不是全部），您可以简化它：

var result;
for (var i = 0 ; i < arr.length ; i++) {
    if (arr[i].keyword == "what ever you are looking for") {
        result = arr[i];
        break;
    }
}

如果您不是在寻找平等，但需要使用占位符，请查看String.prototype.indexOf() 或regular expressions。

如果你想不惜一切代价使用$.grep()（虽然手动循环并没有太大区别，它也会循环，只是在内部循环），你可以 - 它看起来像这样：

$("#query").on('keypress', function () {
    var result = $.grep(keywords, function(e){
        return (e.keyword == "whatever you are looking for again");
        // use regular expressions or .indexOf again if you don't want to test equallity
    });
});

但是，循环遍历大型结构（当您与数据库进行比较时，我怀疑您在 arr 中有很多这些对象？）但是效率非常低。您必须循环的事实表明设计不佳。如果你真的有很多，你可以考虑使用支持索引的数据结构，比如Hash Table/Map（这些没有在核心 Java API 中实现；但很容易在 yoru 上实现）。但是，如果您需要占位符，它们将不起作用，它们仅在使用相等来匹配结果时才有优势。

Answer 4

您可以尝试使用 jQuery UI 的 AutoComplete...http://jqueryui.com/autocomplete/

您必须将数组缩减为您希望可搜索的字段（即关键字属性的字符串文字，如@9​​87654324@）并将其作为source 在autocomplete 中传递选项。

然后挂钩到change 事件http://api.jqueryui.com/autocomplete/#event-change 并从原始数组中提取对象的其余部分。

编辑：如果您想使用 grep，这里有一个使用该方法获取结果的示例，但是下一步是如何将它们显示为自动选项！

http://jsfiddle.net/eQp3h/

var arr = [
    {"keyword": "Sample 1", "item": {"title":"Sample Title", "url": "/sample"}},
    {"keyword": "Foo 1", "item": {"title":"Foo Title", "url": "/sample"}}
];


$("#query").on('keyup', function () {
    var regExp = new RegExp("^" + $(this).val(), "i");

    var result = $.grep(arr, function(e, i){
        var match = regExp.test(e.keyword);
        return match;
    });

    $("#results").text(JSON.stringify(result));
});

Answer 5

试试这个

    $("body").on("keyup","#query",function(e){
        var str = $("#query").val().toLowerCase();
        var newarr = $.grep(arr,function(n,i){
            return n.keyword.toLowerCase().search(str)!=-1;
        });
    });