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.
Have you checked your JavaScript console?
"Uncaught TypeError: Cannot read property 'items' of undefined" -- because there is no data or data.items in your JSON.
Try changing
if (response.data.items) {
to
if (response.data && response.data.items) {
and it will at least fail gracefully.
I had to enable jQuery on your jsfiddle...
Once I did so, it seems that the server is returning a 500 server error for the ajax request.
You'll need to investigate the server side response as there is nothing we can do to troubleshoot this for you.
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);
});
}