.getjson results not displaying

I'm trying to write a very simple autosuggest type function so that, whenever a user enters a value into the search input, a list of matching results appear in below (In a ul with the id of playlist).

$("#ep_search").keydown(function() {

    var term = $("#ep_search").val();
        url = "includes/live_search.php?jsoncallback=&term=" + term;

    $.getJSON(url, function(data) {
        $.each(data.items, function(item){
            $("<li>").text(item.title).appendTo("#playlist ul");
开发者_如何学JAVA        });
    });

});

Using chrome's developer tools, I can see that I am getting back results:

([{"title":"Episode 4: Title"},{"title":"Episode 3: Title"},{"title":"Episode 2: Title"},{"title":"Episode 1: Title"}])

However, nothing is displaying on the page?

Am I missing something crucial here? I'm new to working with JSON requests.

Looks like data is itself an array:

([{"title":"Episode 
 ^-- array

I'm not sure where the parentheses come from, they're probably just a copy'n'paste thing so I'll ignore them.

Try this:

$.each(data, function(item){
    // ...

data.items doesn't appear to be defined. If you look at your JSON, it is just an array, not an object with items.

There are a couple of things going on here. First is that your request is formatted for JSONP but live_search.php is not padding the JSON output with a function name. This is probably because you did not set the 'jsoncallback' param to "?" in your request . However, since you are making a cross-domain request (Same Origin) you don't need to use JSONP. You can have list_search.php return regular JSON without the outer function padding. You can open up live_search.php, remove code that outputs the $_GET['jsoncallback'] variable as well as the surrounding parenthesis. The resulting output should look like this:

{"title":"Episode 4: Title"},{"title":"Episode 3: Title"},{"title":"Episode 2: Title"},{"title":"Episode 1: Title"}

Also, your $.each iterator is missing the second parameter in the callback function. See jQuery.each() docs. I've also provided an example below.

$("#ep_search").keydown(function() {
    var term = $("#ep_search").val();
    url = "includes/live_search.php?term=" + term;

    $.getJSON(url, function(data) { 
        $.each(data, function(idx, ele){
            $("<li />").text(ele.title).appendTo("#playlist ul");
        });
    });
});

Your url is wrong, so the server-response is missing the function-name.

The response should look something like this:

jQuery12345(yourJson)

But by the wrong url there is no value for jsoncallback sended to the server(the value is generated by jQuery and the server should use it as function-name in the response)

Use either:

url = "includes/live_search.php?jsoncallback=?&term=" + term;

(you're missing the question-mark for jsoncallback)

<?php
  //live_search.php 
   echo $_GET['jsoncallback'].'('.json_encode($someObject).')';
?>

Or

url = "includes/live_search.php?term=" + term;

(you don't need the jsoncallback-parameter, it's not a X-Domain-Request. Let the server respond with the pure JSON)

<?php
  //live_search.php 
   echo json_encode($someObject);
?>

your $.each() should look like this:

$.each(data, function(index,item){
            $("<li>").text(item.title).appendTo("#playlist ul");
        });

(The first argument passed to the callback is the index, not the current item...what will be the 2nd argument)