6

jquery ui オートコンプリート リストの最後の要素として html ボタンを挿入しようとしています。このボタンは、オートコンプリート リストに新しい要素を追加するオプションを含むポップアップ ウィンドウを開くことになっています。これは、オートコンプリート リスト内にボタンを挿入するコードです。

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

responsejQueryUI >= 1.9 を使用している場合、これはコールバックに適しているようです。このコールバックは、ソース配列が設定された直後、ただし項目がユーザーに表示される前に呼び出されます。このイベントを利用して、提案の配列に新しい「ボタン」オブジェクトをプッシュできます。

この「ボタン」オブジェクトには、label追加するボタンの HTML であるプロパティがあり、 buttontrue に設定されたプロパティもあります。このプロパティを使用して、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();
        }
    }
});

また、ボタン用に生成するマークアップ内にイベント処理コードを記述する代わりに、委任されたイベント ハンドラーを使用することをお勧めします。これを行う 1 つの方法は、ボタンにクラスを与え (.mybutton例で使用しました)、以下を使用して委任されたイベント ハンドラーを作成することonです。

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

これが実際の例です：http://jsfiddle.net/J5rVP/35/

于 2013-01-15T14:56:49.310 に答える