实现自定义 HTML 菜单时丢失 jQuery 自动完成“选择”功能答案

【问题标题】：Losing jQuery autocomplete "Select" functionality when implementing custom HTML menu实现自定义 HTML 菜单时丢失 jQuery 自动完成“选择”功能
【发布时间】：2012-04-27 22:54:13
【问题描述】：

我正在尝试使用自定义下拉菜单实现 jQuery 自动完成功能。我可以使用 data()._renderItem 方法（已注释掉）自定义菜单项，但这会禁用菜单“选择”功能。如果我尝试通过“标签”字段自定义菜单项“选择”功能有效，但我的菜单项 HTML 被解释为字符串。任何人都可以提出一个干净的方法来完成这个。

$("input#selectedInput")

.bind("autocompleteselect", function (event, ui) {
alert("Sel item " + JSON.stringify(ui.item.json));
})



.autocomplete({
appendTo: "#list",
source: function (request, response) {
    //alert("success");
    $.ajax({
        //url: "http://itunes.apple.com/search?term=jack+johnson&entity=musicTrack",
        url: "Example REST URL",
        dataType: "jsonp",
        data: {
            featureClass: "P",
            style: "full",
            maxRows: 12,
            name_startsWith: request.term
        },

        success: function (data) {
            response($.map(data.results, function (item) {
                itunesJson = item;
                return {
                    label: "<li><img src='" + item.artworkUrl30 + "' alt='no photo'/>" + item.trackName + "</li>",
                }
            }));
        },
    });
}
})
/*
        .data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append("<img src='"+item.value+"' alt='no photo'/>"+ item.label)
            .appendTo( ul );
    };
        */

【问题讨论】：

标签： jquery html menu autocomplete

【解决方案1】：

尝试在返回 html 中的图像周围放置锚标记，例如。 ...

.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
         .data( "item.autocomplete", item )
         .append("<a><img src='"+item.value+"' alt='no photo'/></a>"+ item.label)
         .appendTo( ul );

【讨论】：

实际上，您必须将锚标签作为您的 LI 中的根节点，以便自定义自动完成功能完全发挥作用。

【解决方案2】：

尝试在此处阅读：http://www.devbridge.com/projects/autocomplete/jquery/。这是我需要自动完成时使用的。它真的很容易配置。如果它不符合您的需求，请告诉我。

【讨论】：

OP 正在尝试在此处使用 jquery ui 自动完成功能创建一个下拉列表
嗨，亚历克斯，感谢您的回复。然而，我一直在寻找一个限制 jQuery Mobile 的自动完成库的解决方案（即没有其他插件）。
好的。那么这个怎么样：andymatthews.net/read/2012/03/27/…

【解决方案3】：

一个简单的解决方法是在成功调用标签后发送到HTML Encode list using JavaScript

var elm = $("#list");
elm.html(elm.text());

工作小提琴：http://jsfiddle.net/naveen/yRwH7/

【讨论】：

感谢您的代码。这会正确呈现菜单，但不会触发自动完成“选择”事件。