How do you attach a custom callback function to the jquery autocomplete extension?

Question

I'm using the jquery autocomplete 1.0.2 extension by Dylan Verheul, Dan G. Switzer, Anjesh Tuladhar, Jörn Zaefferer. I am attempting to execute my own callback function when .show() and .hide() are called from within the autocomplete control. I haven't found any way for it to actually recognize my callback function. If anyone is familiar with this control and can help I would be greatly appreciative.

Answer 1

Sorry, I don't have any easy answer to your question, I checked the plugin source code and didn't find any mechanism to let you do want you want. I think you'll have to update this plugin yourself to make it work as you wish.

The idea is to add your callbacks to the options parameter and then make the plugin use these callbacks. First, you'll have to modify the plugin code. Go to the function that creates the class in charge of showing/hiding the autocomplete control :

$.Autocompleter.Select = function (options, input, select, config) {

If you scroll down, you can see that this function returns an object with show() and hide() methods. You can add the following code :

hide: function() {
    ...
    options.showCallback && options.showCallback(); // Invoke callback function if set
},
...
show: function() {
    ...
    options.hideCallback && options.hideCallback(); // Invoke callback function if set
},

Finally, when you create your autocomplete, you should add your callbacks to your options:

$("#myTextBox").autocomplete("http://...",
{
    showCallback : function() { /* do what you want here */ },
    hideCallback : function() { /* do what you want here */ }
});

Not tested at all, it's just a quick and dirty solution. I hope this helps.