Question

我正在寻找一些帮助来自定义显示自动完成结果的下拉列表。我有以下html我想用来显示结果。这个想法是下面的div被隐藏起来，并且一旦匹配，我使div可见，并且每个匹配的结果将被包含在＆lt; 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 set-up jquery-ui autocomplete in Rails）

目前我只在下拉列表中显示名称（item.name）。如何在上面的代码中获取我想要的html。我感到困惑的部分是如何获取传递给函数的ul项周围的div。感谢。

Answer 1

使用.parent（）转到ul：http://api.jquery.com/prev/

周围的div

$(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（理论上）。

Answer 2

每个项目都是响应对象集合。如果在您的回复中该对象具有电子邮件访问的字段，则为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);
};

jquery autocomplete - 在自定义div中显示结果

2 个答案: