jquery - 插入 html 按钮作为 jquery ui 自动完成列表的最后一个元素

Question

我一直在尝试插入一个 html 按钮作为 jquery ui 自动完成列表的最后一个元素。该按钮应该打开一个弹出窗口，其中包含将新元素添加到自动完成列表的选项。这是在自动完成列表中插入按钮的代码:

data.push({label: '<input type="button" name="btn_name_field" id="btn_name_field" title="Create" class="button firstChild" value="Add new">'});
response(data);

这是打开弹出窗口的函数:

$(document).on("click", "#btn_name_field", function () {
    open_popup("Street_Address", 400, 180, "", true, false,  {"call_back_function":"set_return","form_name":"EditView"}, "single", true );
});

为了能够将 html 作为“标签”插入其中，我必须使用此函数:

$[ "ui" ][ "autocomplete" ].prototype["_renderItem"] = function( ul, item) {
return $( "<li></li>" ) 
  .data( "item.autocomplete", item )
  .append( $( "<a></a>" ).html( item.label ) )
  .appendTo( ul );
};

发生的情况是:按钮显示正常并且执行其应有的操作(打开一个弹出窗口)然而，打开弹出窗口后，html 输入中的所有代码都会插入到文本框中。这是逻辑行为，因为代码是作为标签插入的，但是有人知道插入 html 按钮作为自动完成的最后一个元素的最佳方法是什么吗？

提前致谢

Answer 1

如果您使用的是 jQueryUI >= 1.9，这对于 response 回调来说似乎是一个不错的工作。在填充源数组之后、向用户显示项目之前立即调用此回调。您可以利用此事件在建议数组上推送一个新的“按钮”对象。

这个“按钮”对象有一个 label 属性，它是您要添加的按钮的 HTML，它还有一个设置为 true 的 button 属性。您可以使用此属性取消 select 事件的默认操作:

$.ui.autocomplete.prototype._renderItem = function (ul, item) {
    return $("<li></li>")
        .data("item.autocomplete", item)
        .append($("<a></a>").html(item.label))
        .appendTo(ul);
};

$("#auto").autocomplete({
    source: /* source */
    response: function (event, ui) {
        // Add the "button" object to the list of suggestions:
        ui.content.push({
            label: "<input type='button' value='click me' class='mybutton' />",
            button: true
        });
    },
    select: function (event, ui) {
        // If this is the button, don't populate the <input>
        if (ui.item.button) {
            event.preventDefault();
        }
    }
});

此外，我建议使用委托(delegate)事件处理程序，而不是在为按钮生成的标记内编写事件处理代码。一种方法是为您的按钮提供一个类(我在示例中使用了 .mybutton)，并使用 on 编写委托(delegate)事件处理程序:

$(document).on("click", ".mybutton", function () {
    alert('clicked!');
});

这是一个工作示例:http://jsfiddle.net/J5rVP/35/