jQuery Mobile 리스트 필터 — data-filter · placeholder 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile 리스트 필터
data-filter · data-filter-placeholder 완전 정리

검색창 자동 생성 + 입력 즉시 항목 필터링

시작 오늘 분석할 코드

data-filter="true" 한 줄로 리스트 위에 검색창이 자동 생성된다. 사용자가 글자를 입력하면 리스트가 즉시 필터링되어 일치하는 항목만 남는다.

<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> ... </ul>

실제 출력

🔍 검색키워드를 입력하세요

• ㄱ 1
• 강
• ㅂ 2
• 바다
• 바다새
• ㅎ 1
• 하늘

---

용어 핵심 키워드

data-filter="true"검색창 자동 생성 + 즉시 필터링 활성화

data-filter-placeholder검색창 안내 문구 — 비어있을 때 회색으로 표시

즉시 필터링키 입력 → 자동으로 일치 항목만 표시 (실시간)

listdivider 카운트필터 후에도 그룹별 항목 수가 동적으로 갱신됨

---

1 data-filter — 한 줄로 검색창 추가

리스트 위에 검색창이 별도로 그려진다. 사용자가 입력하는 글자가 li의 텍스트와 부분 일치하는지 jQuery Mobile이 실시간으로 비교한다.

⚙ 검색 알고리즘 — 단순 부분 일치(includes)다. 정규식이나 전체 일치는 아님. "바"를 입력하면 "바다", "바다새"가 모두 남는다.

---

2 data-filter-placeholder — 안내 문구

검색창이 비어있을 때 회색으로 보이는 안내 글씨다. placeholder 속성과 같은 역할이다. 한국어로 명시하면 사용자가 "여기에 검색어를 입력하면 된다"는 것을 즉시 안다.

---

3 카운트 표시는 정적

이 코드의 <span class="ui-li-count">1</span>은 코드 작성자가 직접 적은 숫자다. 자동으로 li 개수를 세는 게 아니다. 필터 후에 jQM이 카운트를 갱신해주지는 않는다 — 정확한 그룹별 카운트가 필요하면 직접 계산해야 한다.

---

 

반응형

 

4 활용 — 긴 리스트에 필수

리스트 항목이 30개를 넘어가면 사용자가 일일이 스크롤하기 어렵다. 필터를 켜면 즉시 검색이 가능해 사용성이 크게 좋아진다. 전화번호부·국가 목록·메뉴 카탈로그 등에 자주 쓴다.

---

5 자주 하는 실수

• data-filter="true"를 ul이 아닌 li에 적용 — 동작 안 함
• placeholder 누락 → 빈 검색창이라 사용자가 용도 모름
• 검색 결과가 listdivider만 남는 경우 — divider는 그룹 헤더라 검색 매칭에 포함되지 않음 → 결과 없을 때도 헤더만 동그러미 남을 수 있음

---

핵심 한 줄 요약

data-filter="true"검색창 자동 생성 + 실시간 필터링

data-filter-placeholder검색창 안내 문구

알고리즘li 텍스트 부분 일치 (대소문자 무시)

활용30개 이상의 긴 리스트에 필수

Tags

#jQuery-Mobile #listview #data-filter #data-filter-placeholder #검색필터 #실시간검색 #부분일치 #검색창자동 #모바일웹 #jQuery #CSS #HTML #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

jQuery-Mobile, listview, data-filter, data-filter-placeholder, 검색필터, 실시간검색, 부분일치, 검색창자동생성, 모바일웹, jQuery, CSS, HTML, 웹개발, 티스토리