방법 - 검색 메뉴
JavaScript로 링크를 필터링하는 검색 메뉴를 만드는 방법을 알아보세요.
검색/필터 메뉴
탐색 메뉴에서 링크를 검색하는 방법:
페이지 콘텐츠
검색 옵션을 "필터링"하기 위해 검색 창 내부에 특정 카테고리/링크를 입력하기 시작합니다.
일부 텍스트.. 일부 텍스트.. 일부 텍스트.. 일부 텍스트.. 일부 텍스트.. 일부 텍스트.. 일부 텍스트.. 일부 텍스트.. 일부 텍스트..
일부 다른 텍스트.. 일부 텍스트.. 일부 텍스트.. 일부 텍스트.. 일부 텍스트.. 일부 텍스트.. 일부 텍스트.. 일부 텍스트.. 일부 텍스트..
글좀..
검색 메뉴 만들기
1단계) HTML 추가:
예시
<input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.."
title="Type in a category">
<ul id="myMenu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">SQL</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">Node.js</a></li>
</ul>
참고: 이 데모에서는 링크할 페이지가 없기 때문에 href="#"를 사용합니다. 실생활에서 이것은 특정 페이지에 대한 실제 URL이어야 합니다.
2단계) CSS 추가:
검색창 및 탐색 메뉴 스타일 지정:
예시
/* Style the search box */
#mySearch {
width: 100%;
font-size: 18px;
padding: 11px;
border: 1px solid #ddd;
}
/* Style the navigation
menu */
#myMenu {
list-style-type: none;
padding: 0;
margin: 0;
}
/* Style the navigation links */
#myMenu li a {
padding: 12px;
text-decoration: none;
color: black;
display: block
}
#myMenu li a:hover {
background-color: #eee;
}
3단계) 자바스크립트 추가:
예시
<script>
function myFunction() {
// Declare variables
var input, filter,
ul, li, a, i;
input = document.getElementById("mySearch");
filter = input.value.toUpperCase();
ul =
document.getElementById("myMenu");
li =
ul.getElementsByTagName("li");
// Loop through all
list items, and hide those who don't match the search query
for (i = 0; i <
li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
}
else {
li[i].style.display = "none";
}
}
}
</script>
팁: 대소문자를 구분하는 검색을 수행하려면 toUpperCase() 를 제거하십시오 .
팁: 테이블 필터링 방법 도 확인하십시오 .
팁: 목록을 필터링하는 방법 도 확인하십시오 .