Javascript Search in Object Array Like SQL By Object Key

Use the Array.prototype.filter method:

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

Then arr.filterBy('keyword', '1') would return both the objects(in your arr array), while arr.filterBy('keyword', 'oo') would return only the second one.

DEMO

The answer is simple: YOu have to loop through all of your objects, look at each keyword entry and decide wether it matches your search or not. SOmething like this:

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

If you only need the frist match (and not all of them), you can simplify it:

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

If you're not looking for equality, but need to use placeholders, take al look at String.prototype.indexOf() or regular expressions.

If you want to use $.grep() at all costs (there isn't too much difference to looping manually though, it does loop as well, just itnernally), you can - it'd look like this:

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

Looping over large strucutres however (as you're comparing to databases, I suspect you have A LOT of those objects inside arr?) is very inefficient however. The fact that you HAVE TO loop indicates bad design. If you really got a lot of them, you might consider using a data structure that supports indexing, like a Hash Table/Map (those are not implemented in the core Java API; but are easy to implement on yoru own). They won't work if you need placeholders though, they're only an advantage when using equality to match results.

You could try using jQuery UI's AutoComplete... http://jqueryui.com/autocomplete/

You'll have to reduce your array to just the fields you're wanting to be searchable (ie. string literals for the keyword property, like ["Sample 1", "Foo 1"]) and pass that as the source in the autocomplete options.

Then hook into the change event http://api.jqueryui.com/autocomplete/#event-change and pull out the rest of your object from the original array.

EDIT : If you want to use grep, here is an example that gets the results using that method, but how you display them as auto options is then the next step!

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));
});

Try this

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