Question

I am trying to make an instant search functionality within json. The code seems right but definitely doesn’t work. Would you please guys have a look and help me to fix it? Thanks in advance.

http://jsfiddle.net/hMyr7/

Answer 1

Your JSONP represents the data that your AJAX call recieves. It looks like this:

jsonCallback([{
    "id": 41,
    "title": "My city",
    "permalink": "http:\/\/mykolaiv.cityfacts.pro\/my-city\/",
    "content": "",
    "meta": {
        "ultimatum_layout": [""],
        "_edit_last": ["1"],
        "_edit_lock": ["1346784971:1"]
    },
    "excerpt": "",
    "date": "2012-09-04 18:26:50",
    "author": "oyeremchuk",
    "categories": [],
    "tags": [null]
}]);

The outermost node is an array. To access the first element in that array you can use an indexer: response[0]. The question then is “What do you want from your data?”

Judging from your js, you probably want to loop over the whole response, and pull id, title and permalink from each item. This ought to do for your callback:

    success: function(response) {
        $.each(response, function(i, item) {
            var data_id = item.id;
            var data_title = item.title;
            var data_viewCount = item.permalink;

            var final = "<div id='id'><div>" + data_id + "</div><div id='title'>" + data_title + "</div></div>";

            $("#results").append(final);

        });
    }

http://jsfiddle.net/hMyr7/15/.