Add Instant Search Filtering to Web Pages with DropSearchJS

Preview:

Description:

DropSearchJS is a lightweight JavaScript library that has the ability to instantly filter page content as users type. It suits product listings, directories, or any content-heavy page requiring quick navigation.

Think about an e-commerce site where customers can instantly see products as they enter their search terms. Or a documentation site where developers can quickly find the API references they need. This library improves user experience by reducing the time and effort to find content.

This library is built with pure vanilla JavaScript. You don’t need jQuery or any other libraries. Because it filters in real-time, users see results update instantly with each keystroke. If you need to categorize content, the Tag support lets you filter items by custom tags.

See it in action:

How to use it:

1. Download and include the DropSearchJS script on your web page.

<script src="/path/to/dropsearch.min.js"></script>

2. Add the dropsearch-input attribute to your search input element. The value of this attribute acts as an identifier, linking the input to a specific group of elements you want to filter.

<input type="text" dropsearch-input="languages" placeholder="Search...">

3. Apply the dropsearch attribute to the elements you want to filter. The value of this attribute must match the value you used in the dropsearch-input attribute of your search input.

<div dropsearch="languages">JavaScript</div>
<div dropsearch="languages">HTML</div>
<div dropsearch="languages">CSS</div>

4. Use tags for more precise filtering. This is useful when you want to filter based on categories, keywords, or other attributes that aren’t directly visible in the element’s text content.

<div dropsearch="languages" dropsearch-tags="react,angular,vue">JavaScript</div>
<div dropsearch="languages" dropsearch-tags="html5,xml,dhtml">HTML</div>
<div dropsearch="languages" dropsearch-tags="css3,css4,css2">CSS</div>

5. You can display a custom message when no items match the user’s search query.

<!-- create an HTML element (e.g., a <div>) to hold the "No results" message. Initially, hide this element using CSS: -->
<div id="no-results" style="display: none;">
  No results
</div>

// This code listens for input events on the search input. 
// After a short delay (to avoid rapid flickering), it checks if any of the filtered items are visible. 
// If none are visible, it shows the "No results" message; otherwise, it hides the message.
document.addEventListener('DOMContentLoaded', () => {
  const searchInput = document.querySelector('[dropsearch-input="languages"]');
  const items = document.querySelectorAll('[dropsearch="languages"]'); 
  const noResults = document.getElementById('no-results');
  searchInput.addEventListener('input', () => {
    setTimeout(() => { // Short delay for better user experience
      const visibleItems = Array.from(items).filter(item => item.style.display !== 'none');
      noResults.style.display = visibleItems.length === 0 ? 'block' : 'none';
    }, 100); // 100ms delay
  });
});

6. If your page content changes dynamically (e.g., you add new elements via JavaScript after the initial page load), you need to tell dropSearchJS to re-scan the DOM and update its internal list of searchable elements.

window.initDropSearch();

How It Works

The library initializes on DOM load, scanning elements with dropsearch-input attributes. Each input triggers a filter check on associated dropsearch elements. The filterItems method compares the query against text content and tags, toggling visibility based on matches.

Event listeners on inputs call filterItems during typing. The method uses case-insensitive matching and splits comma-separated tags into arrays. Elements display unless the query lacks matches in both text and tags.