搜尋html實現

PHPz原創: 2023-05-15 17:27:371219瀏覽

搜尋功能是網頁應用程式中不可或缺的一部分，它使用戶能夠在網站中快速找到自己需要的資訊。在本文中，我將介紹如何使用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中文網其他相關文章！

JavaScript html 事件 dom innerHTML input 键盘事件 ul li

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：js改變html下一篇：js改變html

看更多