jQuery Plugin not returning results from JSON return of AJAX

Question

So I'm using this jQuery plugin: jSuggest
Which is based on this plugin: autoSuggest

Here's a jsFiddle with the (working) demo of jSuggest: demo

This is the code I am using to instantiate the plugin on my page:

<form id="add" action="components/AddItem.php" method="post" enctype="multipart/form-data" class="center clear">
            <fieldset>
                <legend>Basic Information</legend>
                <label for="name">Name</label>
                <br />
                <input type="text" name="name" id="name"/>
                ...[snip]...
        </form>

.

$( '#name' ).jSuggest({
                        source: "components/suggItem.php",
                        selectedItemProp: "name",
                        seekVal: "name",
                        selectionLimit: 1,
                        uniqID: "item",
                        keyDelay: 100,
                        newText: "You must click outside the text box to add a new item."
                        });

This is the string that returns from "components/suggItem.php" when I type "ch" into the textbox:

[ {"value":"1","name":"Cheeseburger"},{"value":"3","name":"Fish Sandwich"} ]

(That's Content-type: application/json and I'm getting it from FireBug)

However, the only thing I ever get in the dropdown is "No Results Found". Can anyone find a bug in my code?

I have also tried:

$( '#name' ).jSuggest({
                        source: "components/suggItem.php",
                        seekVal: "name",
                        });

and various combinations of "value" and "name".

I cannot figure out why this doesn't work. Any help?

Answer 1

That plugin may have its advantages, but the author appears to be suffering from a significant misunderstanding of the way AJAX works. This code here:

        // If the data is a URL, retrieve the results from it. Else, the data is an object, retrieve the results directly from the source.
        if (dType === 'string'){

          // Set up the limit of the query.
          var limit = qLimit ? "&limit="+encodeURIComponent(qLimit) : '';

          // Build the query and retrieve the response in JSON format.
          $.getJSON(theData+"?"+opts.queryParam+"="+encodeURIComponent(string)+limit+opts.extraParams, function(rData){ theData = rData; });

        }

        // Call the custom retrieveComplete function.
        theData = opts.retrieveComplete.call(this, theData);

appears to me to assume that the "getJSON" call will invoke the function argument synchronously, such that the variable "theData" will be updated before that last (shown) line of code is executed. That's just not going to be true, however, and "theData" is the key object that drives the whole autocomplete mechanism.

The original code (for the "autoSuggest" plugin that seems to be the progenitor of "jSuggest") looks critically different around that code, and it correctly defers the interpretation of the JSON data returned from the ajax call to the handler routine.