Question

I have a jQuery autocomplete field which gets results from Amazon’s autocomplete, as you can see in the source below. There’s a function that I need to call every time the user hovers his cursor over an item on the autocomplete list.

The functions itself isn’t the problem, it’s that I don’t know how to call it. So for simplicity, let’s say that I just need to alert the item that the cursor is over. If I wanted to do that onClick, I suppose I could add a select property but how do I do it onMouseOver?

Here’s the jQuery:

$(document).ready(function () {


    //http://completion.amazon.com/search/complete?method=completion&q=halo&search-alias=videogames&mkt=1&x=updateISSCompletion&noCacheIE=1295031912518
    var filter = $("#new_item").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "http://completion.amazon.com/search/complete",
                type: "GET",
                cache: false,
                dataType: "jsonp",
                success: function (data) {
                    response(data[1]);
                },
                data: {
                    q: request.term,
                    "search-alias": "stripbooks",
                    mkt: "1",
                    callback: '?'
                }
            });
        }
    });
});

Answer 1

the autocomplete list is in the dom as an ul with the class="ui-autocomplete ..." The menu-items are inside that as li’s with class="ui-menu-item" So tying onMouseover to them with jQuery:

$('.ui-autocomplete .ui-menu-item').hover(mouseInHandler, mouseOutHandler); More info on the hover function can be found here.