Jquery Autocomplete Search with Ajax Request as sourcedata

Question

What I want to do:

I want to do a input text field with a jquery autocomplete function which gets the source data from a cross-domain curl request. The result should be exactly like this example (CSS not important here): http://abload.de/img/jquerydblf5.png (So I actually want to show additional infos which I get from the curl Request). The URL to get the source data is http://www.futhead.com/15/players/search/quick/?term= and in the end I add those letters which are currently typed in at my input field (for example "Ronaldo").

At the moment I only tried to perform the searchrequest without showing all infosin the dropdown as shown in the screen above. I only want to see which playernames I actually got back by the curl request. Later I will try to add more information for the dropdown. Maybe you guys can help me as well with this as well (I think its called custom renderItem ??).

This is what I've tried:

<script>
 $( "#tags" ).autocomplete({
    source: function (request, response) {
        $.ajax({
            type: 'GET',
            url: 'playerscraper.php',
            dataType: "json",
            data: function () { 
                return $("#results").val() 
            },
            success: function (data) {
                // I have no idea what this response and map is good for
                response($.map(data, function (item) {
                    return {
                        label: item.label,
                        id: item.value,
                    };
                }));
            },
        });
    }
});
</script>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

My playerscraper.php is performing the curl request and actually returns a array (tested with echo):

$term = $_GET['term'];
$curlRequest = new CurlRequest(); 
$result = $curlRequest->get('http://www.futhead.com/15/players/search/quick/?term=' . $searchterm);
$players = array();

return json_encode($result);

My problem:

I have no idea how to do the source part for the autocomplete function this way, that I get the right results from the ajax request with my searchterm from the input field. When I type in something in the input field, nothing happens (the function which defines the source is getting called - tested with an alert).

First try to fix the problem with your help (current Code):

<script>
 $( "#tags" ).autocomplete({
    source: function (request, response) {
        $.ajax({
            type: 'GET',
            url: 'playerscraper.php',
            dataType: "json",
            data: function () {
                term: request.term
            },
            success: function (data) {
                // I have no idea what this response and map is good for
                response($.map(data, function(item) {
                    return {
                        label: item.full_name,
                        value: item.player_id
                    };
                }));
            },
        });
    },
    minLength: 3,
    delay: 500
});
</script>

Answer 1

The JSON is in a format which is incompatible with what autocomplete widget expects. This is where the $.map comes into play. You use this function to convert the JSON to desired format. Begin by returning a {label: "display name", value: "some id"} pairs like this:

response($.map(data, function(item) {
    return {
        label: item.full_name,
        value: item.player_id
    };
}));

Notes:

1. You should send content type header with your JSON:

header("Content-Type: application/json");
echo $result;

2. You should use request.term instead of input element value for the data parameter like this:

data: { term: request.term }

3. You should set higher delay and minLength values to reduce number of JSON requests:

delay: 500,
minLength: 3,

4. There are some undefined variables in your PHP script. Fix. Make sure that you echo the JSON instead of returning it. The remote server sends JSON so there is no need to json encode it again.

$term = $_GET['term'];
$result = file_get_contents('http://www.futhead.com/15/players/search/quick/?term=' . $term);
header("Content-Type: application/json");
echo $result;

5. Always check your PHP scripts for issues by opening directly in browser. Always look at browser JavaScript console to look for JavaScript errors and warnings.

Answer 2

Few things are looking wrong in in jQuery code

1. You have used $_GET['term'] in server side code but not passed term in ajax request query string Need to fix as

   data: {term: request.term}

2. extra comman(,) in code, it will create issue in IE browsers

   response($.map(data, function (item) { return { label: item.label, id: item.value }; }));