8

I'm using jQuery UI autocomplete as described [http://api.jqueryui.com/autocomplete/]

I need to do a few things before and after the search is executed. From reading the documentation at the above URL it describes two methods "search" and "response," that are triggered before and after the query is run - perfect. BUT, if I add these to my code, "search" works perfectly, but "response" is never called. What am I doing wrong? All my code works, no javascript errors, autocomplete works perfectly. But I just dont ever have the "response" method being triggered.

$(function() {
             $("#tv").autocomplete({
                source: "a_url_providing_json",
                minLength: 4,
                select: function(event, ui) {
                    $('#state_id').val(ui.item.id);
                    $('#abbrev').val(ui.item.abbrev);
                },
                search : function(a,b) {
                     alert('this works!');
                },
                response : function(a,b) {
                     alert('this doesnt!');
                } 
        })    
    });

Many thanks for any advice !

Rick Hanlon II
  • 20,549
  • 7
  • 47
  • 53
user1729898
  • 81
  • 1
  • 1
  • 3
  • Is that your code as it stands? You do not appear to be closing the `.autocomplete` or the `$(function() {` with closing brackets. Also, I don't believe you need a comma after the `response: {}` section as it is the last in the list for `autocomplete`. – Morrowind789 Oct 08 '12 at 20:24
  • hi ,sorry, no its not a complete code fragment, just illustrating the "response" method. I'll update to put the full code, but as i say its all working, autcomplete works perfectly, its just i dont understand why the response function isnt triggered. tahanks – user1729898 Oct 08 '12 at 20:40
  • Hard to call at this point. Following the documentation you linked [here](http://api.jqueryui.com/autocomplete/#event-response) response is called after a search is performed, but before the results are shown so if your `search :` is firing and showing you _this works!_ but you are then never seeing _this doesn't!_ then maybe search is failing to complete when it looks at the data from `a_url_providing_json` and so the event for response never fires. I feel like I need to see more code as what you have now should be valid syntactically. – Morrowind789 Oct 08 '12 at 20:54
  • thanks, but this is all the js code there is. I guess i could paste the web page, but thats quite big. and as the autocomplete works 100%, the server url is called, the json is parsed, the drop down menu is shown, everything works perfectly... but it just doesnt fire the response method. There's nothing wrong on the javascript console either. Everything is hunky dory.. but just no response method. Ah well, thanks anyway – user1729898 Oct 08 '12 at 20:56
  • jQuery UI 1.9 introduces the response-callback (http://jqueryui.com/upgrade-guide/1.9/#added-response-event). – Techek Jan 21 '14 at 11:29

2 Answers2

10

This callback-method arrived with the new jquery-ui. I could not get this to work, but after i updated from 1.8.20 to 1.9.2 the callback fires just as it is supposed to.

Hope it helps!

Johan Nordin
  • 161
  • 1
  • 9
2

Assuming that all of your code is correct, you may need to upgrade your version of jQuery UI (and the corresponding jQuery as well). This is because although the documentation you were looking at says "Autocomplete widget version added: 1.8," the response event was not added until 1.9 (See the jQuery 1.9 Upgrade Guide: Response Event) This also means that you will not be able to "Bind an event listener to the autocompleteresponse event" as the guide states.

Once you upgrade to a jQuery and jQuery UI version which supports the autocomplete response event, this code will work as expected.

As a tip to anyone new to this event, keep in mind that if you modify the data, you need to include both the value and label properties for each item you want to add, even if your source data was just an array of values. This is because once the content gets into this event, it has already been 'normalized' (that is, the label has been pared with a value).

So if you want to add "Other" to the results returned, your response event would look like: 

response: function (e, ui) {
  ui.content.push(
    {label:"Other", value:"Option"}
  );
}

This will add an "Other" option to every list, which will have a input value of "Option."

Rick Hanlon II
  • 20,549
  • 7
  • 47
  • 53
  • 1
    Thanks to user [adam-willden](http://stackoverflow.com/users/2456180/adam-willden) for the edit which was wrongly rejected. – Rick Hanlon II Jun 21 '14 at 03:25