Semantic UI is a front-end programming framework for theming comparable to Bootstrap. It’s a CSS and jQuery-based open-source framework. It includes pre-built semantic elements that aid in creating attractive, responsive, and flexible layouts using HTML.
The Search module in Semantic UI allows a user to query a data set for results. A collection of results can be displayed as a consequence of a search. A search can return results from distant material that are organized by category. Within a static local source, a search can seek results.
- Standard: This search type can be used to create a search box of standards type & can be used to display the list of output.
- Category: This search type can be used to create a search box that displays results ordered by categories.
- Local Search: This search option can be used to display the set of results within the local source statically.
- Local Category Search: This search option can be used to categories the results within the local source statically.
- loading: This class is act as an indicator that is used to display the loading status.
Semantic UI Search Variations:
- Disabled: This disables the search bar to prevent users from searching.
- Fluid: This allows the results of the search to expand to cover the width of its container.
- Aligned: This option allows the results in the search bar to be aligned to the left or right.
Syntax:
<div class="ui search"> <input class="prompt" type="text"> </div>
Example 1: This example illustrates the Semantic UI Search Types.
- Standard Search:
<!DOCTYPE html> < html >
< head >
< title >
Semantic-UI Search Standard Type
</ title >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "ui container center aligned" >
< h2 class = "header ui green" >
GeeksforGeeks
</ h2 >
< h3 >Semantic-UI Search </ h3 >
< div class = "ui search" >
< input class = "prompt"
type = "text"
placeholder = "Search for articles..." >
< div class = "results" ></ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
- Local Search Type:
<!DOCTYPE html> < html >
< head >
< title >
Semantic-UI Search Standard Type
</ title >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< center >
< div class = "ui container" >
< h2 class = "header ui green" >
GeeksforGeeks
</ h2 >
< h3 >Semantic-UI Search</ h3 >
< p >Local Search Type</ p >
< div class = "ui search" >
< div class = "ui icon input" >
< input class = "prompt"
type = "text"
placeholder = "Search for tutorials..." />
< i class = "search icon" ></ i >
</ div >
< div class = "results" ></ div >
</ div >
</ div >
</ center >
< script >
var content = [{
title: "Python",
}, {
title: "Javascript ",
}, {
title: "Java",
}, ];
$(".ui.search").search({
source: content,
fullTextSearch: false,
});
</ script >
</ body >
</ html >
|
Output:
Example 2: This example illustrates the Semantic UI Search States.
<!DOCTYPE html> < html >
< head >
< title >
Semantic-UI Search Standard Type
</ title >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "ui container center aligned" >
< h2 class = "header ui green" >
GeeksforGeeks
</ h2 >
< h3 >Semantic-UI Search </ h3 >
< div class = "ui loading search" >
< div class = "ui icon input" >
< input class = "prompt"
type = "text"
placeholder = "Search for articles..." />
< i class = "search icon" ></ i >
</ div >
< div class = "results" ></ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 3: This example illustrates the Semantic UI Search Variations.
<!DOCTYPE html> < html >
< head >
< title >
Semantic-UI Search
</ title >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< center >
< h1 class = "ui green header" >
GeeksforGeeks
</ h1 >
< h3 >
Semantic UI Search Variations
</ h3 >
< br >
< p >Disabled search</ p >
< div class = "ui disabled search" >
< div class = "ui icon input" >
< i class = "search icon" ></ i >
< input class = "prompt"
type = "text"
placeholder = "Search for tutorials..." />
</ div >
< div class = "results" ></ div >
</ div >
< br >
< p >Fluid search</ p >
< div class = "ui fluid search" >
< div class = "ui icon input" >
< i class = "search icon" ></ i >
< input class = "prompt"
type = "text"
placeholder = "Search for tutorials..." />
</ div >
< div class = "results" ></ div >
</ div >
< br >
< p >Aligned search</ p >
< div class = " ui container" >
< div class = "ui left aligned category search" >
< div class = "ui icon input" >
< i class = "search icon" ></ i >
< input class = "prompt"
type = "text"
placeholder = "Search for tutorials..." >
</ div >
< div class = "results" ></ div >
</ div >
</ div >
</ center >
< script >
var content = [{
title: "Python",
url:
description: `Python is a high-level,
general-purpose and a very popular
programming language.`,
}, {
title: "Javascript ",
url:
description: `JavaScript is the world
most popular lightweight, interpreted
compiled programming language.`
}, {
title: "Java",
url:
description: `Java is one of the most
popular and widely used programming
languages.`
}];
$(".ui.search").search({
source: content,
fullTextSearch: false,
});
</ script >
</ body >
</ html >
|
Output:
Reference: https://semantic-ui.com/modules/search.html