Question

I am using jQuery Autocomplete with JSON but the resulting data is not displaying correctly. If you go to http://whatsmybeer.com and type in “firestone” you get a drop down list that reads “Undefined” with the correct number of results but the JSON is not displaying correctly. You can see an example of the the JSON output which is called from the javascript http://whatsmybeer.com/search.inc.php?beer=firestone&callback=?

My JS script to display the JSON results.

<script>
    $(document).ready(function() {
        $( "#REMOTE" ).autocomplete({
            source: function( request, response ) {
                url = "search.inc.php?beer=" + request.term;
                $.getJSON(url + '&callback=?', function(data) {
                    response(data);
                });
            }
        });
    });
</script>

What am I doing wrong with the parsing?

Answer 1

First of all I’d limit the search result to 10 or whatever – first response with thousends or whatever number of beers you have kills the browser when it tries to process the data for display.

Further I’d set the minLength option of autocomplete to 2 as putting one letter is overkill for server side as if someone will enter ‘a’ it will probably return half of the database (if you won’t like to include the returned amount limit) adding autocomplete after entering 2nd letter is more natural especially with large databases.

And most importantly – you need to have your JSON response formatted in the right way.

you return object with:

{ 
    beer_name: "name" 
}

and you should return:

{
    label: "autocomplete display value",
    value: "input value after selection"
}

if label and value are the same it should be enough to provide just the label and you should be able to safely omit duplicating it in value