6

我一直在尝试插入一个 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 按钮作为自动完成的最后一个元素的最佳方法是什么吗？

提前致谢

4

1 回答 1

4

如果您使用的是 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/

于 2013-01-15T14:56:49.310 回答