如何实现自定义css到jquery自动完成

Question

我在我的网站上有运行 jquery 自动完成搜索功能，用户输入部分名称并从数据库中找到匹配的全名。问题是当有匹配时，我无法使用以下标记显示名称匹配。它正在使用看起来很糟糕的默认自动完成标记。我需要将结果显示在下面示例中的 li 中。

<div class="search_dropdown_wrapper">
    <div id="search_arrow" class="dropdown_pointer search"></div>
    <ul>
        <li>
            <a>Sam Cohen</a>
            <p>Software Engineer</p>
        </li>
    </ul>
</div>

我无法使用上述 div 将 ul 包装在自动完成中。我尝试过使用代码，我让它部分显示带有标记的结果，但链接功能搞砸了，点击名称不再填充文本框。这是我正在使用的自动完成代码..

if($('#search_name').length > 0){
  $('#search_name').autocomplete({
    minLength: 2,
    source: '/profiles/jquery_auto_complete_name',
        focus: function(event, ui) {
            $('#search_name').val(ui.item.first_name + " " + ui.item.last_name);
            return false;
        },
    select: function(event, ui) {
        $("#receiver-list").val(ui.item.first_name + " " + ui.item.last_name);
        return false;
    }
  })
  .data( "autocomplete" )._renderItem = function( ul, item ) {
      return $( "<li></li>" )
      .data( "item.autocomplete", item )
      .append("<a>" + item.first_name + " " + item.last_name + "</a>")
      .appendTo( ul );
  };
}

（感谢 How to set-up jquery-ui autocomplete in Rails 提供了一个很好的自动完成示例）

谢谢。

Answer 1

你可以为此找到一个奇妙的宝石：

https://github.com/crowdint/rails3-jquery-autocomplete

最好的问候！