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

使用 .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 回答
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 回答