Semantic-UI Search

Last Updated : 21 Apr, 2022

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.

Semantic UI Search Type:

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.

Semantic UI Search States:

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:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Semantic-UI Search Standard Type 
    </title>
    <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 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:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Semantic-UI Search Standard Type 
    </title>
    <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>
    <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.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Semantic-UI Search Standard Type 
    </title>
    <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 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.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Semantic-UI Search 
    </title>
    <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>
    <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: 
"https://www.geeksforgeeks.org/python-programming-language/",
            description: `Python is a high-level, 
            general-purpose and a very popular 
            programming language.`,
        }, {
            title: "Javascript ",
            url: 
"https://www.geeksforgeeks.org/javascript/",
            description: `JavaScript is the world 
            most popular lightweight, interpreted 
            compiled programming language.`
        }, {
            title: "Java",
            url: 
"https://www.geeksforgeeks.org/java/",
            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

Suggest improvement

Semantic-UI Rating Variations

Semantic-UI Search Types

Share your thoughts in the comments

Semantic-UI Button

Semantic-UI Divider

Semantic-UI Header

Semantic-UI Image

Semantic-UI Input

Semantic-UI Label

Semantic-UI List

Semantic-UI Loader

Semantic-UI Placeholder

Semantic-UI Rail

Semantic-UI Reveal

Smentic-UI Segment

Semantic-UI Step

Semantic-UI Breadcrumb

Smenatic-UI Form

Semantic-UI Menu

Semantic-UI Message

Semantic-UI Table

Semnatic-UI Advertisement

Semantic-UI Card

Semantic-UI Comment

Semantic-UI Feed

Semantic-UI Item

Semantic-UI Statistics

Semantic-UI Accordion

Smenatic-UI Checkbox

Semantic-UI Dimmer

Semantic-UI Dropdown

Smenatic-UI Model

Semantic-UI Popup

Semantic-UI Progress

Smenatic-UI Rating