HTML的字體搜索是一項非常有用的功能，可以讓用戶在網(wǎng)頁上快速搜索需要查找的文字內(nèi)容。這里我們介紹一下如何在HTML中使用字體搜索代碼。
首先，在文檔的頭部添加以下代碼：
<head>
<script src="https://cdn.jsdelivr.net/npm/interactjs@1.10.11/dist/interact.min.js"></script>
<script>
function search(){
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("searchInput");
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>
</head>這是一個JavaScript腳本，它定義了一個名為“search”的函數(shù)，用于搜索文本。 首先，它獲取輸入框內(nèi)容，然后獲取需要被搜索的元素列表，最后將不匹配的元素隱藏，并顯示匹配的元素。
接下來，在頁面中添加一個輸入框和一個搜索按鈕：<body> <input type="text" id="searchInput"> <button onclick="search()">搜索</button> </body>這里我們使用了一個id屬性為“searchInput”的輸入框和一個onclick事件為“search()”的按鈕。這可以讓用戶輸入需要搜索的文字，并通過按鈕觸發(fā)搜索。 最后，我們需要為我們需要搜索的元素列表添加一個id屬性：
<ul id="myUL"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul>這里我們添加了一個id屬性為“myUL”的列表，這是我們將要搜索的元素列表。 這就是我們的HTML字體搜索代碼。通過這個簡單的腳本，我們可以讓用戶在網(wǎng)頁中快速找到自己需要的內(nèi)容。