Question

I’m using an autocomplete widget from jQuery UI library version 1.8.23. My code looks like this:

$(this).autocomplete({
     autoFocus: true,
     minLength: 2,
     delay:     100,
     source:    function(request, response) {AutoCpl.getSource(request, response)},
     select:    function(e, ui)             {AutoCpl.getSelect( e, ui, $(this) )},
     open:      function(e, ui)             {AutoCpl.setOpen($(this))}
});

After 100 ms delay I’m retrieving using AJAX call a list of products. Everything works fine but I have problem with focus event. I want to show product details when it’s hovered on the select list. Because of large amount of data that need to be computed I can’t return products details with product list at once. I need to use another AJAX call to get those information later on focus event. Because someone can hover over all product in one mouse move I can’t make AJAX call and show every response. I have to be sure that someone really want to see details of a specific product, so I want to wait for a while with making that AJAX call.

I was trying to use a jQuery debouce plug-in by Ben Alman but it won’t work the way I want to (or maybe I’m just using it wrong). If I tried this way:

focus:     $.debounce(1000, App.getProductsDetails)

event was delayed by 1 sec (that’s ok) but in the getProductsDetailt I didn’t have access to event and ui objects.
I tried another way:

focus:     function(e, ui){$.debounce(1000, App.getProductsDetails)}

this time getProductsDetails wasn’t even called, which didn’t surprised me much, because as far as I know debounce function must be bind to an event ie. $(‘#id’).click($.debounce()).

My question is how can I delay focus event and at the same time have access to objects return by focus event?

Answer 1

After a few hours of research and trying I’ve found answer.

$.debounce function is passing all arguments, so all I needed to do was add parameters to my AgetProductsDetails method:

App = {
    getProductsDetails: function(e, ui){
        console.log(ui);
    }
}

So this code:

 focus:     $.debounce(1000, App.getProductsDetails)

was good. Documentation of debounce plug-in gave me a clue.

I made mistake later…