搜尋功能是網頁應用程式中不可或缺的一部分，它使用戶能夠在網站中快速找到自己需要的資訊。在本文中，我將介紹如何使用HTML和一些簡單的JavaScript程式碼來實作一個基本的搜尋功能。
首先，我們需要建立一個表單來接收使用者的搜尋查詢。我們可以使用HTML中的form元素來實作這個表單，如下所示：
<form> <input type="text" id="searchInput" placeholder="Search..."> <button type="submit" id="searchButton">Search</button> </form>
在上面的程式碼中，我們使用了兩個元素，一個是input元素，它是一個文字欄位用於接收使用者輸入的搜尋查詢。我們還新增了一個佔位符文字「Search…」來為輸入框提供提示訊息。
另一個是button元素，它是一個按鈕，允許使用者提交搜尋表單。我們也可以使用input元素的type屬性來建立一個提交按鈕。
接下來，我們需要加入一些JavaScript程式碼來處理使用者的搜尋請求並傳回結果。我們可以使用JavaScript中的DOM API來取得使用者輸入的搜尋查詢和網站中的搜尋結果。
以下是完整的HTML程式碼，包括一些基本的JavaScript程式碼來處理搜尋請求。
<!DOCTYPE html>
<html>
<head>
<title>Search Example</title>
</head>
<body>
<form>
<input type="text" id="searchInput" placeholder="Search...">
<button type="submit" id="searchButton">Search</button>
</form>
<ul id="searchResults">
<!-- Search results will be added here -->
</ul>
<script>
const searchInput = document.getElementById('searchInput');
const searchButton = document.getElementById('searchButton');
const searchResults = document.getElementById('searchResults');
const searchHandler = event => {
event.preventDefault();
const query = searchInput.value;
const results = performSearch(query);
displayResults(results);
};
const performSearch = query => {
// Perform search logic here...
};
const displayResults = results => {
searchResults.innerHTML = '';
for (let result of results) {
const listItem = document.createElement('li');
listItem.textContent = result;
searchResults.appendChild(listItem);
}
};
searchButton.addEventListener('click', searchHandler);
searchInput.addEventListener('keydown', event => {
if (event.key === 'Enter') {
searchHandler(event);
}
});
</script>
</body>
</html>在上面的程式碼中，我們首先取得了表單控制項以及搜尋結果的元素，然後使用addEventListener方法為搜尋按鈕和搜尋輸入框新增了事件處理程序。
當使用者提交搜尋表單時，我們會阻止預設行為（在這種情況下是重新載入頁面）並取得使用者查詢的文字。我們將查詢傳遞給performSearch函數，並將結果傳遞給displayResults函數。
在performSearch函數中，我們可以執行任何搜尋邏輯，並傳回符合查詢的結果。在這個例子中，我們只是硬編碼了一些假數據來模擬搜尋結果。
在displayResults函數中，我們使用innerHTML清除所有結果，然後遍歷結果陣列並為每個結果建立一個li元素，並將其新增至ul元素。
最後，我們新增了一個鍵盤事件偵聽器，以便使用者可以透過在輸入框中按Enter鍵提交搜尋查詢。
透過實現這個簡單的搜尋功能，我們可以為使用者提供更好的網站體驗，並讓他們更容易找到他們需要的資訊。
以上是搜尋html實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！
