JQuery UI AutoComplete Code Issue with Function as Source

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&amp;term=" + request.term + "&amp;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.

Nelson Benítez León · Accepted Answer · 2012-10-10 17:22:17Z

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&amp;term=" + request.term + "&amp;version=" + $(".item").parent().parent().children(":nth-child(3)").children("select").val(), function(data) {response(data);});},
                            minLength: 2
                        });

answered Oct 10, 2012 at 17:22

Nelson Benítez León

51k8 gold badges70 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

thatidiotguy Over a year ago

Yep, I was just about to answer my own question. Sometimes it the simple things. Thank you for looking it over though. Note however that I did need to .parseJSON data however for some reason.

Collectives™ on Stack Overflow

JQuery UI AutoComplete Code Issue with Function as Source

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related