Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements.
The search bar allows us to search for content on a website. It is an essential part of a website, which increases the ease of finding the desired item. Semantic UI provides us with a styled search bar. Let's have a look at Semantic UI Search Types.
Semantic UI Search Types:
- Standard: A Standard Semantic UI Search that can be used to search for content on a webpage.
- Category: A Categorical search can be used to search for ordered categorical content from a remote source.
- Local Search: A Local Search searches for data in a local place such as local storage, process storage, etc.
- Local Categorical Search: A Local Categorical Search searches for ordered categorical data in a local place such as local storage, process storage, etc.
Semantic UI Search Class:
- search: This class is used to create a search bar.
Syntax:
<div class="ui search">
<div class="ui icon input">
<input class="prompt" type="text" placeholder="...">
<i class="search icon"></i>
</div>
<div class="results"></div>
</div>
Example 1: In the below example, we have created a standard search.
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Search Types</h4>
<hr>
<br />
<div class="ui search">
<div class="ui icon input">
<input class="prompt"
type="text"
placeholder="Search Names">
<i class="search icon"></i>
</div>
<div class="results"></div>
</div>
</div>
</body>
</html>
Output:
Example 2: In the below example, we have created a local search.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui green header">
GeeksforGeeks
</h2>
<h4>Semantic UI Search Types</h4>
<hr>
<br />
<div class="ui search">
<div class="ui icon input">
<input class="prompt" type="text"
placeholder="Search Names">
<i class="search icon"></i>
</div>
<div class="results"></div>
</div>
</div>
<script>
const names = [
{ title: 'Praneeth' },
{ title: 'Tondepu' },
{ title: 'Tej' },
{ title: 'Pranav' },
{ title: 'Srinivas' },
{ title: 'Srihita' },
{ title: 'Annie' },
]
$('.ui.search').search({
source: names
});
</script>
</body>
</html>
Output:
Example 3: In the below example, we have created a local categorical search.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Search Types</h4>
<hr>
<br />
<div class="ui search">
<div class="ui icon input">
<input class="prompt" type="text"
placeholder="Search Names">
<i class="search icon"></i>
</div>
<div class="results"></div>
</div>
</div>
<script>
const names = [
{ category: "Pigs", title: 'Praneeth' },
{ category: "Mouse", title: 'Tondepu' },
{ category: "Mouse", title: 'Tej' },
{ category: "Pigs", title: 'Pranav' },
{ category: "Lions", title: 'Srinivas' },
{ category: "Lions", title: 'Srihita' },
{ category: "Mouse", title: 'Annie' },
]
$('.ui.search').search({
type: 'category',
source: names
});
</script>
</body>
</html>
Output:
Example 4: In the below example, we have created a category search and searched for the nationality of a person based on their name using the nationality API.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Search Types</h4>
<hr>
<br />
<div class="ui category search">
<div class="ui icon input">
<input class="prompt" type="text"
placeholder="Search Nationality">
<i class="search icon"></i>
</div>
<div class="results"></div>
</div>
</div>
<script>
$('.ui.search')
.search({
apiSettings: {
url:
'https://api.nationalize.io/?name=%7Bquery%7D'
},
fields: {
results: 'country',
title: 'country_id',
probability: 'probability'
},
minCharacters: 3
});
</script>
</body>
</html>
Output:
Reference: https://semantic-ui.com/modules/search.html