Semantic-UI Search Disabled Variation
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 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
Share your thoughts in the comments
Please Login to comment...