Skip to content
Related Articles

Related Articles

Semantic-UI Search

View Discussion
Improve Article
Save Article
  • Last Updated : 21 Apr, 2022
View Discussion
Improve Article
Save Article

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=
    <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:

HTML




<!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.

HTML




<!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.

HTML




<!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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!