使用香草JavaScript的頁面內過濾搜索

通過簡單的頁面搜索功能增強用戶在信息豐富的頁面上的體驗。忘記數據庫查詢或JSON解析 - 此方法直接搜索網頁的渲染文本內容。當存在瀏覽器內置搜索時，這種方法提供了精緻的過濾體驗，突出了相關結果，以便於導航。

這是一個現場演示，展示了功能：[鏈接到演示]

我在一個現實世界中使用了這項技術： https：//www.php.cn/link/2a60eed050799970d61abad679da7aeae8f 。

利用JavaScript

本教程採用JavaScript來管理所有交互式元素。具體而言，它將：

1. 確定可搜索的內容。
2. 監視用戶在搜索字段中的輸入。
3. 過濾可搜索元素的innerText 。
4. 檢查文本是否包含搜索詞（ .includes()是此處的鍵）。
5. 基於搜索術語匹配的切換元素可見性。

基本的HTML結構

讓我們假設一個常見問題頁面，其中每個問題都作為標題和內容的“卡”提出：

<h1 id="常見問題解答部分">常見問題解答部分</h1>

<div>
  <h3 id="我們是誰">我們是誰</h3>
  <p>它不僅倖存了五個世紀，而且還倖存下來，而且跨越了電子排版，基本上保持不變。它得到了普及</p>
</div>

<div>
  <h3 id="我們做什麼">我們做什麼</h3>
  <p>它不僅倖存了五個世紀，而且還倖存下來，而且跨越了電子排版，基本上保持不變。它得到了普及</p>
</div>

<div>
  <h3 id="為什麼在這里工作">為什麼在這里工作</h3>
  <p>它不僅倖存了五個世紀，而且還倖存下來，而且跨越了電子排版，基本上保持不變。它得到了普及</p>
</div>

<div>
  <h3 id="了解更多">了解更多</h3>
  <p>想進一步了解我們嗎？</p>
</div>

對於有許多問題的頁面，此結構有效地擴展了。

為了啟用互動性，我們將使用單個CSS規則：

 。 }

該類將動態添加或刪除以控制元素可見性。我們還將添加一個搜索輸入：

<label for="searchbox">搜尋:</label>
<input type="text" id="searchbox">

核心JavaScript功能

以下JavaScript代碼管理搜索功能：

函數livesearch（）{
  讓卡= document.queryselectorall（'。cards'）; //選擇卡元素
  令searchQuery = document.getElementById（“ searchbox”）。值; //獲取搜索詞

  cards.foreach（card => {
    令textContent = card.innertext.tolowercase（）; //歸一化為小寫
    令searchTermlower = searchQuery.tolowercase（）; //歸一化為小寫

    if（textContent.includes（搜索termlower））{
      card.classlist.remove（'is Hinded'）; //顯示匹配卡
    } 別的 {
      card.classlist.add（'is Hinded'）; //隱藏非匹配卡
    }
  }）;
}

//添加少量延遲以防止功能過多的調用
令TypingTimer;
令TypeInterval = 500; //半秒
令searchInput = document.getElementById（'searchbox'）;

SEARCHINPUT.ADDEVENTLISTENER（'keyup'，（）=> {
  ClearTimeOut（typingTimer）;
  typingTimer = settimeout（livesearch，typeinterval）;
}）;

該代碼通過卡迭代，檢查搜索術語包含（不敏感），並相應地更新可見性。延遲阻止了快速擊鍵的性能問題。

擴展搜索功能：模糊匹配

要合併模糊匹配（即使不明確顯示相關的關鍵字，搜索相關關鍵字），請考慮使用隱藏的元素或屬性：

方法1：隱藏元素

添加包含關鍵字的隱藏元素：

<div>
  <h3 id="我們是誰">我們是誰</h3>
  <p>...</p>
  <span class="hidden-keywords">秘密，公司，歷史</span>
</div>

修改liveSearch包括包含textContent而不是innerText以訪問隱藏的關鍵字。

方法2：屬性

使用諸如alt類的屬性進行圖像：

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174227042512545.jpg" class="lazy" alt="使用香草JavaScript的頁面內過濾搜索">

調整liveSearch使用getAttribute('alt')搜索屬性值。

重要說明

此搜索方法僅限於DOM中已經呈現的內容。它不適合搜索外部數據庫或大型數據集。

結論

通過香草JavaScript實施的簡單而有效的頁面搜索解決方案可以顯著提高具有廣泛內容的網頁的可用性。適應並擴展此技術以適合各種應用，從常見問題頁面到圖像畫廊。

以上是使用香草JavaScript的頁面內過濾搜索的詳細內容。更多資訊請關注PHP中文網其他相關文章！