$.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:

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

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

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>

Add the HTML elements that need to toggle their visibility based on text in search input

On search input, set data-target attribute to .list-item because list <li> elements have to be identified.

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>

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”.

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