jQuery與自定義ul自動完成

Question

我使用的jQuery自動完成工作正常，但我需要自定義下拉列表，這是在輸入框中鍵入內容後出現的。

自動完成代碼：

bindAutoComplete:function(id,url,callback){ 

     $("#"+id).autocomplete({ 

     source: function(request, response) { 
      $.post(url, { 
      keyword: request.term 
      }, response); 
     }, 
     minLength: 3, 
     select: callback, 


     }) 
    } 

現在自動完成給這個作爲輸出：

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-2" tabindex="0" style="display: block; top: 28px; left: 382.067px; width: 190px;"> 
    <li class="ui-menu-item" role="presentation"> 
    <a id="ui-id-18" class="ui-corner-all" tabindex="-1"> 
     Ask 1 Question 
     <br> 
    </a> 
    </li> 
    <li class="ui-menu-item" role="presentation"> 
    <a id="ui-id-19" class="ui-corner-all" tabindex="-1"> 
     Ask 2 Question 
     <br> 
    </a> 
    </li> 
    <li class="ui-menu-item" role="presentation"> 
    <a id="ui-id-20" class="ui-corner-all" tabindex="-1"> 
     Ask 3 Question 
     <br> 
    </a> 
    </li> 
    <li class="ui-menu-item" role="presentation"> 
    <a id="ui-id-21" class="ui-corner-all" tabindex="-1"> 
    Ask 4 Question 
     <br> 
    </a> 
    </li> 
    <li class="ui-menu-item" role="presentation"> 
    <a id="ui-id-22" class="ui-corner-all" tabindex="-1"> 
     Ask 5 Question 
     <br> 
    </a> 
    </li> 
</ul> 

但我想上面的輸出轉換到下面的HTML。

<div class="searchPOP"> 
    <ul> 
     <li><a href="#">Ask 1 Question</a></li> 
     <li><a href="#">Ask 2 Question</a></li> 
     <li><a href="#">Ask 3 Question</a></li> 
     <li><a href="#">Ask 4 Question</a></li> 
    </ul> 
</div> 

請讓我知道如何做到這一點？

Answer 1

如果你能提供一個JSFiddle，那會很好。