插入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，它还有一个button设置为 true 的属性。您可以使用此属性取消事件的默认操作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();
        }
    }
});

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

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

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