如何指定自定義元素來顯示自動填充？

Question

我想在單獨的div中顯示建議的自動填充，而不是在指定的自動填充小部件上顯示的彈出式菜單。原因是：我們使用自動完成功能來幫助用戶看到他們即將嘗試重複輸入。當他們鍵入輸入字段時，div將顯示漸進式匹配。

我做我的自動完成樣本代碼的測試， 「鳥」 與遠程數據源：

<script> 
    $(function() { 
    function log(message) { 
     $("<div/>").text(message).prependTo("#log"); 
     $("#log").scrollTop(0); 
    } 

    $("#birds").autocomplete({ 
    source: "search", 
    minLength: 2, 
    select: function(event, ui) { 
     log(ui.item ? 
     "Selected: " + ui.item.value + " aka " + ui.item.id : 
     "Nothing selected, input was " + this.value); 
     } 
    }); 
    }); 
</script> 

Answer 1

你的意思是這樣的：

$(function() { 
    function log(message) { 
     $("<div/>").text(message).prependTo("#log"); 
     $("#log").scrollTop(0); 
    } 

    $("#birds").autocomplete({ 
    source: "search", 
    minLength: 2, 
    select: function(event, ui) { 
     $('.newDiv ul').empty(); 
     }, 
    change: function(event, ui) { 
     $('.newDiv ul').empty(); 
    } 
    }).data('autocomplete')._renderItem = function(ul, item) {  
     return $('<li/>') 
     .data('item.autocomplete', item) 
     .append(item.value) 
     .appendTo($('.newDiv ul')); 
    }; 
    }); 

HTML：

<div class="newDiv"><ul></ul></div> 

Answer 2

雖然自動完成中沒有規定要實現您想要的功能，但此處的這個技巧可能適用於您你 - How to customize jquery autocomplete for displaying in a DIV