5

名前を入力するjQueryオートコンプリート（jquery uiバージョン1.8）があります。利用可能な場合、これらはデータベースの所有者名であるため、ユーザーがリストから名前を選択するようにします。ただし、新しい所有者名を追加する必要がある場合があります。この場合、オートコンプリートのドロップダウンリストから[新規追加]を選択してもらいます。問題は、オートコンプリートのソースデータに選択肢として「新規追加」を含めると、ユーザーがテキストボックスに入力している内容と一致しないため、オートコンプリートのドロップダウンリストに選択肢として表示されないことです。

以下はjavascriptコードです。サーバー側のコードは含めていませんが、サーバーからの結果により、ドロップダウンに「Add New、Betty、Bob、Cathy、Dan、Edward」などのリストが作成されたとします。'selector'は、テキストタイプの標準のhtml入力フィールドです。

    $('.selector').autocomplete({
        autoFocus: false,
        minLength: 1,
        focus: function (event, ui) {
            $('.selector').val(ui.item.value);
            return false;
        },
        select: function (event, ui) {
            $('.selector').val(ui.item.value);
            return false;
        }
    });

    $('.selector').keyup(function(){
        // Each time a new character is entered, recreate the drop down list by matching entered characters to beginning of first name field

        $.ajax({
            type: "POST",
            url: "(url to c#.net asmx page and method)",
            contentType: "application/json; charset=utf-8",
            data: '{(various data parameters)}',
            datatype: "json",
            error: function (data) {
                var data = $.parseJSON(data.responseText);
                alert("Error: " + data.Message);
            },
            success: function (data, status, info) {
                if (data.hasOwnProperty("d")) {
                    var nameList = data.d;
                }
                else {
                    var nameList = data;
                }
                $('.selector').autocomplete("option", "source", nameList);
            }
        });
    });

ajax呼び出しのURLとデータ部分のJavaScriptコードからいくつかのチャンクを切り取ったことに気付きましたが、オートコンプリートの「ソース」を取得することはここでは問題ではないので、問題ないと思いました。

たとえば、文字bを入力すると、リストの3つの選択肢として「AddNew、Bill、Betty」が表示される必要がありますが、現在は「Bill、Betty」しか表示されません。 「新規追加」に「b」はありません。

「新規追加」の選択肢を常に利用できるようにする方法についての考えや解決策はありますか？

事前にどうもありがとうございました。

4

1 に答える 1

6

オートコンプリートは、取得したオブジェクトのコレクションを順序付けられていないリストに構築すると思います。のように->

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all">
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 1</a>
  </li>
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 2</a>
  </li>
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 3</a>
  </li>
</ul>

openまた、イベントでリストが開かれたことを検出するメソッドもあります。

$('selector').autocomplete({
  open: function(){
    $('.ui-autocomplete').prepend('<li class="ui-menu-item"><a class="ui-corner-all ui-add-new"> Add New </a></li>');
  }
});

オートコンプリートドロップダウンメニューが開いたときにリストアイテムが追加されたことがわかります。そのため、リストの一番上に常に「新規追加」が表示されます（jQueryの.prepend（）がそれを処理します）。

于 2012-08-16T16:03:22.373 に答える