Categories: Engineering

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

  • 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

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

Tejesh P

Leave a Comment
Share
Published by
Tejesh P

Recent Posts

Top 7 Benefits of Using AI for Quality Control in Manufacturing

AI in Manufacturing: Drastically Boosting Quality Control Imagine the factory floors are active with precision… Read More

22 hours ago

10 Key Steps to Build a Smart Factory

Did you know the smart factory market is expected to grow significantly over the next… Read More

2 weeks ago

How to Future-Proof Warehouse Operations with Smart Inventory Management?

Effective inventory management is more crucial than ever in today's fast-paced business environment. It directly… Read More

1 month ago

Gramener Bags a Spot in AIM’s Top Data Science Service Providers 2024 Penetration-Maturity (PeMa) Quadrant

Gramener - A Straive Company has secured a spot in Analytics India Magazine’s (AIM) Challengers… Read More

3 months ago

Gramener Wins Nasscom AI Gamechangers 2024 Award for Responsible AI

Recently, we won the Nasscom AI Gamechangers Award for Responsible AI, especially for our Fish… Read More

4 months ago

Master Supply Chain Resilience: 5 Powerful Lessons from Our Location Intelligence Webinar

Supply chain disruptions can arise from various sources, such as extreme weather events, geopolitical tensions,… Read More

4 months ago

This website uses cookies.