Question

So essentially, I have tried to move to a function that does the work for the source parameter in the autocomplete method, and now the script is broken. No options show up upon typing even though values are being returned by the $.get(...) request.

The HTML:

           <tr class="itemTableRow">
                <td>
                    <input type="text" class="item" name="items[]" />
                </td>
                <td>
                    <input type="range" class="quantity" min="1" max="10000" name="quantity[]" />
                </td>
                <td>
                    <select class="versionSelect"><option value="5">5</option><option value="6">6</option><option value="7">7</option></select>
                </td>
            </tr>

The Javascript:

 $(function() {

            $( ".item" ).autocomplete({
                            source: function(request, response){var data = $.get("http://mydomain.com/dev/kohana/utils/items/search?searchType=maxList&term=" + request.term + "&version=" + $(".item").parent().parent().children(":nth-child(3)").children("select").val()); console.log("" + data); response(data);},
                            minLength: 2
                        });
});

The resulting HTTP GET Request URL (when CP is entered in input field):

http://mydomain.com/dev/kohana/utils/items/search?searchType=maxList&term=CP&version=5

The resulting HTTP Response Body:

[{"label":"CP1031L","value":"CP1031L"},{"label":"CP1031M", "value":"CP1031M"]

I also have included the Jquery UI default stylesheet on the page, although it was working before that. I feel like I am missing something very basic with how the functional callback is supposed to work. Can anybody spot the problem? Thank you for your assistance.

Answer 1

You should call the response(data) on the success handler of your .get() call, like this:

$( ".item" ).autocomplete({
                            source: function(request, response){var data = $.get("http://mydomain.com/dev/kohana/utils/items/search?searchType=maxList&term=" + request.term + "&version=" + $(".item").parent().parent().children(":nth-child(3)").children("select").val(), function(data) {response(data);});},
                            minLength: 2
                        });