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

您可以尝试使用jQuery UI的自动完成功能... http://jqueryui.com/autocomplete/

您必须将数组简化为您想要搜索的字段（即关键字属性的字符串文字，如["Sample 1", "Foo 1"]），并将其作为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 3

使用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 4

答案很简单：你必须遍历所有对象，查看每个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()（虽然手动循环没有太多区别，它也会循环，只是一般），你可以 - 它看起来像这样： / p>

$("#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 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;
        });
    });

Javascript在对象数组中搜索，类似于SQL按对象键

5 个答案:

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