정렬되지 않은 HTML 목록을 jQuery 자동 완성으로 바꾸려면 어떻게해야합니까?

Question

페이지에 정렬되지 않은 긴 목록이 있습니다. 누른 후 입력 "나중에"단어 "야후"를 표시하고 클릭 할 때 (또는 어디는 "나는 오히려 jQuery를 자동 완성으로 표시 줄이

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

같은 대신 링크 목록을 표시 보이는 Enter ")는 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; 
    } 
});