JQuery UI 自动完成 - 悬停/焦点时的额外项目信息？如何？

Question

我有以下计划:

我的网站上有一个自动完成 UI 元素，其中包含多个自动完成选项，但我想要的是以下内容，但无法让它工作:

如果用户将鼠标悬停(鼠标悬停或箭头键)在某个项目上，则项目文本应更改为项目值当然和额外信息。

为了让自己更清楚:

如果用户在自动完成中将鼠标悬停在电影标题上，则该项目应更改为电影标题 + 电影长度 + 电影封面。

当项目失去焦点时，它应该更改为原始状态

这是我所拥有的::

$("#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;
    }

});

抱歉，如果我的英语无法理解......

提前感谢

Answer 1

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


        },

你的意思是这样吗？

当用户将鼠标悬停在列表中的选项上时，它会更改输入区域的值吗？

这是一个工作 fiddle :http://jsfiddle.net/4nzXv/

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

您可以将鼠标悬停处理程序附加到每个项目上，一旦将其悬停在其上，就会将其从列表中删除，但是它似乎是相当疯狂的功能，但它实现了您想要的...这是 fiddle : http://jsfiddle.net/4nzXv/5/