In-Page Filtered Search With Vanilla JavaScript

Enhance user experience on information-rich pages with a simple, in-page search function. Forget database queries or JSON parsing – this method directly searches the rendered text content of a webpage. While browser built-in search exists, this approach offers a refined filtering experience, highlighting relevant results for easier navigation.

Here's a live demo showcasing the functionality: [link to demo]

I utilize this technique in a real-world project: https://www.php.cn/link/2a60eed05079970d61abad679da7ae8f.

Leveraging JavaScript

This tutorial employs JavaScript to manage all interactive elements. Specifically, it will:

1. Identify searchable content.
2. Monitor user input in the search field.
3. Filter the innerText of searchable elements.
4. Check if text includes the search term (.includes() is key here).
5. Toggle element visibility based on search term matches.

Basic HTML Structure

Let's assume an FAQ page where each question is presented as a "card" with a title and content:

<h1 id="FAQ-Section">FAQ Section</h1>

<div>
  <h3 id="Who-are-we">Who are we</h3>
  <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized </p>
</div>

<div>
  <h3 id="What-we-do">What we do</h3>
  <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized </p>
</div>

<div>
  <h3 id="Why-work-here">Why work here</h3>
  <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized</p>
</div>

<div>
  <h3 id="Learn-more">Learn more</h3>
  <p>Want to learn more about us?</p>
</div>

For a page with numerous questions, this structure scales effectively.

To enable interactivity, we'll use a single CSS rule:

.is-hidden { display: none; }

This class will be dynamically added or removed to control element visibility. We'll also add a search input:

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

Core JavaScript Functionality

The following JavaScript code manages the search functionality:

function liveSearch() {
  let cards = document.querySelectorAll('.cards'); // Select card elements
  let searchQuery = document.getElementById("searchbox").value; // Get search term

  cards.forEach(card => {
    let textContent = card.innerText.toLowerCase(); //Normalize to lowercase
    let searchTermLower = searchQuery.toLowerCase(); //Normalize to lowercase

    if (textContent.includes(searchTermLower)) {
      card.classList.remove('is-hidden'); // Show matching cards
    } else {
      card.classList.add('is-hidden'); // Hide non-matching cards
    }
  });
}

// Add a small delay to prevent excessive function calls
let typingTimer;
let typeInterval = 500; // Half a second
let searchInput = document.getElementById('searchbox');

searchInput.addEventListener('keyup', () => {
  clearTimeout(typingTimer);
  typingTimer = setTimeout(liveSearch, typeInterval);
});

The code iterates through cards, checks for search term inclusion (case-insensitive), and updates visibility accordingly. A delay prevents performance issues from rapid keystrokes.

Expanding Search Capabilities: Fuzzy Matching

To incorporate fuzzy matching (searching for related keywords, even if not explicitly displayed), consider using hidden elements or attributes:

Method 1: Hidden Elements

Add hidden elements containing keywords:

<div>
  <h3 id="Who-are-we">Who are we</h3>
  <p>...</p>
  <span class="hidden-keywords">secret, company, history</span>
</div>

Modify liveSearch to include textContent instead of innerText to access hidden keywords.

Method 2: Attributes

Use attributes like alt for images:

<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174227042512545.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="In-Page Filtered Search With Vanilla JavaScript ">

Adjust liveSearch to use getAttribute('alt') to search attribute values.

Important Note

This search method is limited to content already rendered in the DOM. It's not suitable for searching external databases or large datasets.

Conclusion

This simple, yet effective, in-page search solution, implemented with vanilla JavaScript, can significantly improve the usability of web pages with extensive content. Adapt and expand upon this technique to suit various applications, from FAQ pages to image galleries.

The above is the detailed content of In-Page Filtered Search With Vanilla JavaScript. For more information, please follow other related articles on the PHP Chinese website!