Open In App

Semantic-UI Search Disabled Variation

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.

A Semantic UI Search module is used for searching something from a selection of data. The data can be supplied through an API call or through a local variable within JavaScript.

Semantic UI Search Disabled Variation Class:

  • disabled: This class is used on the search module to disable it.

Syntax:

<div class="ui search disabled">
    ...
</div>

Example 1: The example below shows how to disable a search module in Semantic UI using the disabled class.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link rel="stylesheet"
          href=
    <style>
        .container{
            text-align: center;
        }
        h3{
            margin-top: 0px;
        }
        .container>p{
            margin-top: 30px !important;
        }
    </style>
</head>
  
<body>
    <div class="ui container">
        <div>
            <h1 style="color:green;">GeeksforGeeks</h1>
            <h3>Semantic UI - Search Disabled Variation</h3>
        </div>
        <p><b>Normal Search:</b></p>
        <div class="ui search">
            <div class="ui icon input">
                <input class="prompt" 
                       type="text"
                       placeholder="Search Something">
                <i class="search icon"></i>
            </div>
            <div class="results"></div>
        </div>
        <p><b>Disabled Search:</b></p>
        <div class="ui search disabled">
            <div class="ui icon input">
                <input class="prompt"
                       type="text"
                       placeholder="Search Something">
                <i class="search icon"></i>
            </div>
            <div class="results"></div>
        </div>
    </div>
</body>
</html>


Output:

Semantic-UI Search Disabled Variation

Semantic UI disabled search variation

Example 2: This example shows how to disable the search module using JavaScript.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI - Search Disabled Variation</title>
    <link rel="stylesheet" 
          href=
    <script src=
    </script>
    <script src=
    </script>
  
    <style>
        .container{
            text-align: center;
        }
        h3{
            margin-top: 0px;
        }
        .container>p{
            margin-top: 30px !important;
        }
        button{
            margin-top: 25px !important;
        }
    </style>
</head>
  
<body>
    <div class="ui container">
        <div>
            <h1 style="color:green;">GeeksforGeeks</h1>
            <h3>Semantic UI - Search Disabled Variation</h3>
        </div>
        <p><b>Search:</b></p>
        <div id="search1" class="ui search">
            <div class="ui icon input">
                <input class="prompt" 
                       type="text"
                       placeholder="Search Something">
                <i class="search icon"></i>
            </div>
            <div class="results"></div>
        </div>
  
        <button class="ui inverted red button" 
                onclick="disable();">
            Disable Search
       </button>
    </div>
  
    <script>
        function disable(){
            document.getElementById("search1").classList.add("disabled");
        }
    </script>
</body>
  
</html>


Output:

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



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