$.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:
Live Demo: Here’s what you will end up building:
git clone https://github.com/tejesh95/g1-search.git $('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-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”.
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.
Effective inventory management is more crucial than ever in today's fast-paced business environment. It directly… Read More
Gramener - A Straive Company has secured a spot in Analytics India Magazine’s (AIM) Challengers… Read More
Recently, we won the Nasscom AI Gamechangers Award for Responsible AI, especially for our Fish… Read More
Supply chain disruptions can arise from various sources, such as extreme weather events, geopolitical tensions,… Read More
In a remarkable achievement for the Artificial Intelligence (AI) sector, Gramener's flagship GenAI-powered Intelligent Document… Read More
Did you know that the global Industry 4.0 market size is projected to reach USD… Read More
This website uses cookies.
Leave a Comment