jQuery Mobile - 검색 필터 리스트

검색 필터 리스트

 

리스트뷰의 위쪽에 검색 필터 상자를 추가

 

* 입력한 키워드를 검색해 일치하는 항목만 보여준다.

 

* listdivider 는 검색 대상에서 제외한다.

 

* data-role="listview" 속성을 가진 <ul> 태그에 data-filter 속성에 true 값을 넣는다.

<div data-role="content">
    <p>content영역</p>			
    <ul data-role="listview" data-filter="true" data-filter-placeholder="검색키워드를 입력하세요">
        <li data-role="listdivider">ㄱ<span class="ui-li-count">1</span></li>
        <li><a href="#">강</a></li>
        <li data-role="listdivider">ㅂ<span class="ui-li-count">2</span></</li>
        <li><a href="#">바다</a></li>
        <li><a href="#">바다새</a></li>							
        <li data-role="listdivider">ㅎ<span class="ui-li-count">1</span></</li>
        <li><a href="#">하늘</a></li>
    </ul>
</div>