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.
<!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:
Example 2: This example shows how to disable the search module using JavaScript.
<!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