Semantic-UI Search Disabled Variation - Coding

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= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
    <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 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= 
"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> 
  
    <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

Reffered: https://www.geeksforgeeks.org

CSS

Related
Semantic-UI Page Headers Type
Semantic-UI Input Disabled State
Semantic-UI Item
Semantic-UI Drop Transition
Semantic-UI Icon Set Users & People

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	7