如何將HTML無序列表轉換爲jQuery自動完成？

Question

我在頁面上有一個很長的無序列表。它看起來是這樣的

<ul> 
    <li> 
    <a href="http://www.google.com"> 
     Google 
    </a> 
    </li> 
    <li> 
    <a href="http://www.yahoo.com"> 
     Yahoo 
    </a> 
    </li> 
</ul> 

而不是顯示一個鏈接列表，我寧願將其顯示爲jQuery的自動完成輸入，其中「雅」將顯示單詞「雅虎」和點擊時（或按後「輸入「）會帶你到它的href。

有沒有什麼辦法可以得到這個動態變化列表的內容，並將其顯示爲自動完成？

Answer 1

假設你正在使用jQuery UI，

步驟1 - 添加一個文本輸入您自動完成：

<input type="text" id="search" /> 

步驟2 - 轉換你的DOM來的鏈接列表：

var items = []; 

$('ul li a').each(function() { 
    items.push({ 
     value: $(this).attr('href'), 
     label: $(this).text() 
    }); 
}); 

$('ul').remove(); 

步驟3 - 打開自動完成功能：

$("#search").autocomplete({ 
    source: items, 
    select: function (event, ui) { 
     window.location.href = ui.item.value; 
    } 
});