$.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>
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>
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-targetattribute is to identify target elements.data-searchattribute is to identify text content inside the target elements.data-hide-classattribute 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”.
To read full documentation of $.search, head to https://learn.gramener.com/guide/g1/search
- g1 npm package: https://www.npmjs.com/package/g1
- g1 open source MIT license codebase: https://code.gramener.com/cto/g1
In part 2 of the article, we will explore how to enable search transformations on input text to do fuzzy/synonym searches.
