Javascript jquery自动完成-在自定义div中显示结果

我正在寻找一些帮助来定制显示自动完成结果的下拉列表。我有下面的html，我想用它来显示结果。这个想法是，下面的div一开始是隐藏的，一旦有匹配，我就让div可见，每个匹配的结果都将被包装在下面的

标记中

<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 );
  };

$（'search#u name'）。自动完成({
最小长度：2，
...
...
})
.数据（“自动完成”）。\u renderItem=功能（ul，项目）{
返回$（“
”）
.data（“item.autocomplete”，item）
.append（“）

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

或者，抓住前一个兄弟姐妹：（就像我认为你首先需要做的那样）

如果ul已经是jQuery对象，那么只需执行ul.parent（）和ul.prev（）

或者，您可以直接访问包装器div：

$('.search_dropdown_wrapper')

我可能建议向包装器添加一个ID并通过ID访问它，例如：

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


...

然后在脚本中，您可以使用
$（“#搜索_下拉菜单_包装器”）
直接访问div

直接访问方法更安全。如果您更改标记，它仍将访问正确的div（理论上）。
每个项目都是响应对象集合。如果在您的回复中，对象具有电子邮件访问字段，则访问权限将为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);
};

$（“#搜索_名称”）。自动完成({
资料来源：availableTags，
打开：函数（）{
$（此）.autocomplete（“小部件”）
.appendTo（“.search\u dropdown\u wrapper”）
.css（“位置”、“静态”）；
} 
}).data（'ui-autocomplete'）。\u renderItem=函数（ul，项）{
var html，段落；
html=''+item.name+''；
段落='卡通人物
'；
html=html+段落；
返回$（'
）.append（html）.appendTo（ul）；
};
谢谢，我也更喜欢直接的方法。我可以做一些像.appendTo（$（'search\u dropdown\u wrapper-ul'））这样的事情，它可以工作，
被插入ul；但是由于$（'.search\u dropdown\u wrapper'）在默认情况下是隐藏的，我如何以及在哪里插入代码以使其可见？很难做到这一点。
<div class="search_dropdown_wrapper" id="search_dropdown_wrapper">
...
</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);
};