Search Filter Bar
전자정부 모바일 표준프레임워크는 클라이언트 단에서 간단하게 리스트를 검색할 수 있는 검색 필터를 제공한다.
리스트에 data-filter=”true” 속성을 추가하면 리스트 상단에 검색 박스와 함께 자동 검색 기능이 제공되는 검색 필터를 생성할 수 있다.
기본적으로 상위의 테마가 적용되고 data-filter-theme 속성에 테마를 적용하면 검색 필터의 색상을 변경할 수 있다.
- <ul data-role="listview" data-inset="true" data-filter="true">
- <li data-role="list-divider">Coffee</li>
- <li><a href="#">Americano</a><a href="/guide/components/list/format.do">Detail</a></li>
- <li><a href="#">Caffee Latte</a><a href="/guide/components/list/format.do">Detail</a></li>
- <li><a href="#">Caffe Mocha</a><a href="/guide/components/list/format.do">Detail</a></li>
- <li><a href="#">Caramel Macchiato</a><a href="/guide/components/list/format.do">Detail</a></li>
- <li><a href="#">Affogato</a><a href="/guide/components/list/format.do">Detail</a></li>
- <li><a href="#">Vanilla</a><a href="/guide/components/list/format.do">Detail</a></li>
- <li><a href="#">Yogurt</a><a href="/guide/components/list/format.do">Detail</a></li>
- <li><a href="#">Strawberry</a><a href="/guide/components/list/format.do">Detail</a></li>
- <li><a href="#">Fashion fruit</a><a href="/guide/components/list/format.do">Detail</a></li>
- <li><a href="#">Chocolate</a><a href="/guide/components/list/format.do">Detail</a></li>
- </ul>