$.search – jQuery plugin for search on HTML elements

Reading Time: 3 mins

$.search is a jQuery plugin that lets you hide or show matching elements as the user types in a search box.
In this article, you will learn how to:

  1. create a search experience that highlights the matching elements in a list.
  2. enable search transformations on input text to do fuzzy/synonym searches

Live Demo: Here’s what you will end up building:

  • Save
  • Open up your Terminal of choice and clone the demo project using below command
  • $ git clone https://github.com/tejesh95/g1-search.git 
  • Create an HTML file index.html
  • Include jQuery and g1 js library files using the CDN link and instantiate search module using $('body').search()

<!DOCTYPE html>
<html>
<head>
  <title>g1 search</title>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/combine/npm/jquery,npm/g1"></script>
  <script>
    $('body').search()
  </script>
</body>
</html>
  • Save
Add the HTML elements that need to toggle their visibility based on text in search input
  • Save
On search input, set data-target attribute to .list-item because list <li> elements have to be identified.
  • Save
To search text-content of list-item elements, set the data-search attribute to @text 

Create a class called d-none in <style> section inside <head> tag

<!DOCTYPE html>
<html>
<head>
  <title>g1 search</title>
  <style>
    .d-none {
      display: none;
    }
  </style>
</head>
  • Save
Set data-hide-class="d-none" attribute to add the d-none class to all non-matching target elements.


To summarise: On <input type="search"> tag,

  • data-target attribute is to identify target elements. 
  • data-search attribute is to identify text content inside the target elements.
  • data-hide-class attribute adds the class to all non-matching target elements.

The final code looks like:

<!DOCTYPE html>
<html>
<head>
  <title>g1 search</title>
  <style>
    .d-none {
      display: none;
    }
  </style>
</head>
<body>
  <input type="search" data-search="@text" data-target=".list-item" data-hide-class="d-none">
  <ul>
    <li class="list-item">First item text content</li>
    <li class="list-item">Second item text content</li>
    <li class="list-item">Third item text content</li>
  </ul>
  <script src="https://cdn.jsdelivr.net/combine/npm/jquery,npm/g1"></script>
  <script>
    $('body').search()
  </script>

</body>
</html>

A look into another example:

To hide elements that do not match url link attribute

To find matches based on href  attribute url links, give data-search=”href”.

  • Save
Similarly, to find matches based on title attribute values, give data-search=”title” 

To read full documentation of $.search, head to https://learn.gramener.com/guide/g1/search

In part 2 of the article, we will explore how to enable search transformations on input text to do fuzzy/synonym searches.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top
Share via
Copy link
Powered by Social Snap