Question

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

});

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.

Answer 1

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)