Semantic-UI Search Variations
Last Updated :
21 Apr, 2022
Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap.
Semantic UI provides classes for the search bar which allows users to search for a query in the search bar. In this article, let us see about the different search variations in the Semantic UI.
Semantic UI Search Variations:
- Disabled: This disables the search bar to avoid users to search.
- Fluid: This allows the search bar results to expand along with the container.
- Aligned: This allows the search bar results to align the results towards the left or right.
Syntax:
<div class="ui Search-Variations category search">
<div class="ui icon input">
....
</div>
<div class="results"></div>
</div>
Example 1: The following code demonstrates the search disabled variation.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet" />
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">Geeksforgeeks</h1>
<strong> Semantic UI Search variations </strong>
<br /><br />
<div class="ui disabled search">
<div class="ui icon input">
<i class="search icon"></i>
<input class="prompt" type="text"
placeholder="Search Courses...">
</div>
<div class="results"></div>
</div>
</center>
<script>
var content = [
{
title: ' Bootstrap',
description:
' Bootstrap is the most popular CSS framework in the world '
},
{
title: 'Foundation ',
description:
'Foundation is another superb most widely used CSS ' +
' framework in the world. It is used by many companies'
+ ' such as Facebook, eBay, Mozilla, Adobe,' +
' and even Disney'
},
{
title: 'Bulma',
description:
'This free and open-source CSS framework is '
+ 'based on the Flexbox layout model'
},
{
title: 'Pure',
description:
'Pure is a lightweight and responsive CSS framework'
}
]
;
$('.ui.search').search({
source: content,
fullTextSearch: false
})
</script>
</body>
</html>
|
Output:
Semantic-UI Search Variations
Example 2: The following code demonstrates the search fluid variation.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet" />
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">Geeksforgeeks</h1>
<strong> Semantic-UI Search Variations </strong>
<br />
<br />
<div class="ui fluid search">
<div class="ui icon input">
<i class="search icon"></i>
<input class="prompt" type="text"
placeholder="Search Courses...">
</div>
<div class="results"></div>
</div>
</center>
<script>
var content = [
{
title: 'Foundation ',
description: 'Foundation is another superb most' +
' widely used CSS framework in the world.' +
'It is used by many companies such as Facebook' +
', eBay, Mozilla, Adobe, and even Disney'
},
{
title: 'Bulma',
description: 'This free and open-source CSS framework' +
'is based on the Flexbox layout model'
},
{
title: 'Pure',
description:
'Pure is a lightweight and responsive CSS framework'
},
{
title: 'Semantic UI',
description:
'This framework is popularly known for its incredible' +
'thematic effects as well as it’s simple and elegant designs'
},
];
$('.ui.search').search({
source: content,
fullTextSearch: false,
searchFields: [
'title'
],
})
</script>
</body>
</html>
|
Output:
Semantic-UI Search Variations
Example 3: The following code demonstrates the search-aligned class variation.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet" />
<script src=
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">Geeksforgeeks</h1>
<strong> Semantic-UI Search Variations </strong>
<br/>
<br/>
<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 Courses...">
</div>
<div class="results"></div>
</div>
</div>
</center>
<script>
var content = [
{
title: 'Foundation ',
description: 'Foundation is another superb most' +
' widely used CSS framework in the world.'+
'It is used by many companies such as Facebook' +
', eBay, Mozilla, Adobe, and even Disney'
},
{
title: 'Bulma',
description: 'This free and open-source CSS framework' +
'is based on the Flexbox layout model'
},
{
title: 'Pure',
description:
'Pure is a lightweight and responsive CSS framework'
},
{
title: 'Semantic UI',
description: 'This framework is popularly known for '
+ 'its incredible thematic effects as well as '
+ 'it’s simple and elegant designs'
},
]
;
$('.ui.search').search({
source: content,
fullTextSearch: false,
searchFields: [
'title'
],
})
</script>
</body>
</html>
|
Output:
Semantic-UI Search Variations
Reference: https://semantic-ui.com/modules/search.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...