0

オートコンプリートの結果を表示するドロップダウンをカスタマイズするためのヘルプを探しています。結果を表示するために使用したい次のhtmlがあります。アイデアは、下の div が最初は非表示であり、一致するとすぐに div が表示され、一致した各結果が下の < li > タグでラップされるというものです。

<div class="search_dropdown_wrapper" style="display:none;">
    <div id="search_arrow" class="dropdown_pointer search"></div>
    <ul>
        <li>
            <img src="/assets/2c42cdf.jpg"  />
            <h4>Tom Jerry</h4>
            <p>Cartoon Characters</p>
        </li>
        <li>
            ...
        </li>
        ...  
    </ul>
</div>

結果を表示するオートコンプリート コードの部分は..

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

(参考までに、上記はHow to setup jquery-ui autocomplete in Rails のおかげです)

現時点では、ドロップダウンに名前 (item.name) しか表示されていません。上記のコードに必要なhtmlを取得するにはどうすればよいですか。私が混乱している部分は、関数に渡される ul アイテムの周りに div を取得する方法です。ありがとう。

4

2 に答える 2

0

各項目は応答オブジェクトのコレクションです。返信でオブジェクトに電子メール アクセスのフィールドがある場合は、item.email になります。カスタムliタグを使用して、オートコンプリートオブジェクトをカスタムdivに挿入します。

$("#search_name").autocomplete({
  source: availableTags,
  open: function() {
    $(this).autocomplete("widget")
      .appendTo(".search_dropdown_wrapper")
      .css("position", "static");
    } 
}).data('ui-autocomplete')._renderItem = function(ul, item) {
   var html, paragraph;
   html = '<h4><a>' + item.name + '</a></h4>';
   paragraph = '<p>Cartoon Characters</p>';
   html = html + paragraph;
   return $('<li>').append(html).appendTo(ul);
};
于 2015-09-04T14:05:47.577 に答える
0

.parent() を使用して、ul の周りの div にアクセスします: http://api.jquery.com/prev/

$(ul).parent()

または、前の兄弟を取得するには: (最初は何とかする必要がありましたが) http://api.jquery.com/prev/

$(ul).prev()

ul がすでに jQuery オブジェクトである場合は、ul.parent() と ul.prev() を実行するだけです。

または、ラッパー div に直接アクセスできます。

$('.search_dropdown_wrapper')

そのラッパーに ID を追加し、ID でアクセスすることをお勧めします。

<div class="search_dropdown_wrapper" id="search_dropdown_wrapper">
...
</div>

次に、スクリプト$('#search_dropdown_wrapper')で div に直接アクセスするために使用できます。

直接アクセス アプローチの方が安全です。マークアップを変更した場合でも、(理論的には) 正しい div にアクセスします。

于 2012-10-10T06:28:59.227 に答える