操作指南 - 篩選/搜尋列表
學習如何使用 JavaScript 建立篩選列表。
篩選列表
如何使用 JavaScript 在列表中搜索專案。
建立搜尋列表
步驟 1) 新增 HTML
示例
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="搜尋姓名..">
<ul id="myUL">
<li><a href="#">阿黛爾 (Adele)</a></li>
<li><a href="#">艾格尼絲 (Agnes)</a></li>
<li><a href="#">比利 (Billy)</a></li>
<li><a href="#">鮑勃 (Bob)</a></li>
<li><a href="#">卡爾文 (Calvin)</a></li>
<li><a href="#">克里斯蒂娜 (Christina)</a></li>
<li><a href="#">辛迪 (Cindy)</a></li>
</ul>
注意：在此演示中我們使用 href="#"，因為我們沒有可連結的頁面。在實際應用中，這應該是一個指向特定頁面的真實 URL。
步驟 2) 新增 CSS
設定輸入元素和列表的樣式
示例
#myInput {
background-image: url('/css/searchicon.png'); /* 為輸入新增搜尋圖示 */
background-position: 10px 12px; /* 定位搜尋圖示 */
background-repeat: no-repeat; /* 不重複圖示影像 */
width: 100%; /* 全寬度 */
font-size: 16px; /* 增加字型大小 */
padding: 12px 20px 12px 40px; /* 新增一些內邊距 */
border: 1px solid #ddd; /* 新增灰色邊框 */
margin-bottom: 12px; /* 在輸入下方新增一些空間 */
}
#myUL {
/* 移除預設列表樣式 */
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd; /* 為所有連結新增邊框 */
margin-top: -1px; /* 防止雙重邊框 */
background-color: #f6f6f6; /* 灰色背景色 */
padding: 12px; /* 新增一些內邊距 */
text-decoration: none; /* 移除預設文字下劃線 */
font-size: 18px; /* 增加字型大小 */
color: black; /* 新增黑色文字顏色 */
display: block; /* 使其成為塊級元素以填充整個列表 */
}
#myUL li a:hover:not(.header) {
background-color: #eee; /* 為所有連結新增懸停效果，標題除外 */
}
步驟 3) 新增 JavaScript
示例
<script>
function myFunction() {
// 宣告變數
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName('li');
// 遍歷所有列表項，並隱藏不匹配搜尋查詢的項
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
自己動手試一試 »
提示： 如果您想執行區分大小寫的搜尋，請刪除 toUpperCase()。
提示：另請檢視 篩選表格。
