Open In App

Semantic-UI Search Types

Improve
Improve
Like Article
Like
Save
Share
Report

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.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link href=
          rel="stylesheet" />
    <script src=
    </script>
 
    <script src=
    </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:

Standard Search

Example 2: In the below example, we have created a local search.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </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:

Local Search

Example 3: In the below example, we have created a local categorical search.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </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:

Local Categorical Search

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.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </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={query}'
                },
                fields: {
                    results: 'country',
                    title: 'country_id',
                    probability: 'probability'
                },
                minCharacters: 3
            });
    </script>
</body>
 
</html>


Output:

Categorical Search

Reference: https://semantic-ui.com/modules/search.html



Last Updated : 21 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads