1

内部に 1 つのテーブルを持つ非表示の div がたくさんあります。ユーザーは、最初のセル内で名前 (スペースを含むことができます) を検索し、div ID を返す必要があります。
jQueryUI オートコンプリート プラグインを調べましたが、複数の値で動作させるのに問題がありました。プラグインのドキュメントとデモ。
「カスタムデータと表示」の例を定義済みのデータ配列のベースとして使用していますが、それを避けて単純にセレクターを使用したいと思います。

検索ボックス

<label for="search_name">Find name</label>
<input type="text" name="search_name" value="" id="search_name">
<span style="display:none;" id="search_result"></span>

分割

<div id="name_101284"><table>
  <tr><th colspan="5">John Doe (<a href="http://link">text</a>) - snip</th></tr>
  <tr><th>C1</th><th>C2</th><th>C3</th><th>C4</th><th>C5</th></tr>
  <tr><td>snip
</table></div>

JS

  var nameAC = [
   {label:"John Doe",id:"101284"},
   {label:"Johnny",id:"152345"},
   {label:"Jim Nelson",id:"77344"},
   {label:"Jimmy",id:"87457"},
   {label:"Maria",id:"100934"},
   {label:"Maria Nelson",id:"94734"},
   {label:"Jane Doe",id:"86247"},
   {label:"Janet",id:"106588"}
  ];
  $('#search_name').autocomplete({
    minLength: 1,
    delay: 300,
    source: nameAC,
    focus: function(event, ui) {
      $('#search_name').val(ui.item.label);
      return false;
    },
    select: function(event, ui) {
      $('#search_result').text(ui.item.id);
      $('#search_result').show();
    }
  });

プロパティ「label」は、ドロップダウン結果の UL を満たす値を含むと予想される名前です。これを変更するには、このようにデフォルトの _renderItem メソッドを上書きする必要があります

$('#search_name').autocomplete({
 stuff
})
.data("autocomplete")._renderItem = function(ul, item) {
  return $("<li></li>")
  .data("item.autocomplete", item)
  .append("<a>" + item.name + "</a>")
  .appendTo(ul);
};

しかし、それは欠陥があるようです。

nameAC 配列を作成する必要がないように、セレクター (またはコールバック関数) を作成できますか?

4

1 に答える 1

2

キム、あなたのやり方はかなりしっかりしていると思います。関数によってソースを生成したい場合は、データの解析を簡単にすることをお勧めします。つまり、各divの名前の周りにspanタグを配置します。

そうは言っても、現在のデータを使用してそれを行う1つの方法があります。それはおそらく完璧ではないので、私の提案：

function makeArray() {
    var results = [];
    $("div[id^='name_']").each(function() {
        results.push({
            'label': $(this).find('th:first').text().replace(/(.*) \(.*/, '$1'),
            'id': this.id.replace(/name_(\d+)/, '$1')
        });
    });
    return results;
}

明らかに、ユーザー名が次のようなものである場合<span class="name">John Doe</span>、ラベルはより簡単になります。$(this).find('span.name').text()

これの簡単なバージョンが実際に動作しているのをここで見ることができます：http： //jsfiddle.net/ryleyb/MYCbX/

編集：私は言及すべきでした、これは次のようにオートコンプリートから呼び出されます：

$('#search_name').autocomplete({
    source: makeArray() // <-- note the brackets, function is being **called** 
});
于 2010-11-04T17:11:35.187 に答える