Question

I have the following plan in mind:

I have a AutoComplete UI element on my website with several autocomplete options but what i want is the following and i cant get it to work:

if the user hovers (mouseover or arrow-keys) over an item the items text should change into the item value of course and extra information.

To make myself more clear:

If the user Rolls over a movie title in the autocomplete the item should change into the movie title + movielength + moviecover.

And when the item is unfocussed it should get changed into its original state

Here is what i have::

$("#searchField").autocomplete({

    source: dataSet,
    minLength: 1,
    open: function(event, ui) { $(".ui-autocomplete").css({"z-index": 1000, "font-size": "13px"}); },
    focus:function(e,ui) {

        q = $("#ui-active-menuitem").html();
        $("#ui-active-menuitem").html("<b>"+q+"</b>");


    },

    select: function(event, ui) {
        q = $("#ui-active-menuitem").html();
        location.href="?q="+q;
    }

});

Sorry For my english if it is not understandable…

THNX IN ADVANCE

Answer 1

focus:function(e,ui) {
            $("input").val($("#ui-active-menuitem").text());
            q = $("#ui-active-menuitem").html();
            $("#ui-active-menuitem").html("<b>"+q+"</b>");


        },

Do you mean something like this?

When your user hovers over the option in the list it changes the value of the input area?

here is a working fiddle: http://jsfiddle.net/4nzXv/

    $("#ui-active-menuitem").mouseout(function() {
      $("#ui-active-menuitem").hide();
    });

you can append a mouseout handler to each item, once it is hovered over it will then remove it from the list, however it seems to be pretty crazzy functionality wise, but it achieves what you wanted… here is the fiddle: http://jsfiddle.net/4nzXv/5/