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

我的网站上有一个功能正常的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>

有关自动完成的一个很好的示例）

谢谢。
您可以在这里找到一颗神奇的宝石：


致以最良好的祝愿
 jQueryUI将要求您在那里安装
，否则它将无法工作。你能稍微调整一下你的标记来包含它吗？当然，有道理。编辑。还想知道其他的。宝石很好。但在这种情况下，我更喜欢“生的”。
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 );
  };
}