Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble.
Se utiliza un módulo de búsqueda de interfaz de usuario semántica para buscar algo a partir de una selección de datos. Los datos se pueden proporcionar a través de una llamada API oa través de una variable local dentro de JavaScript .
Clase de variación deshabilitada de búsqueda de IU semántica:
- disabled: esta clase se utiliza en el módulo de búsqueda para desactivarlo.
Sintaxis:
<div class="ui search disabled">
...
</div>
Ejemplo 1: el siguiente ejemplo muestra cómo deshabilitar un módulo de búsqueda en la interfaz de usuario semántica usando la clase deshabilitada .
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>
Producción:
Variación de búsqueda deshabilitada de IU semántica
Ejemplo 2: Este ejemplo muestra cómo deshabilitar el módulo de búsqueda usando 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>
Producción:
Referencia: https://semantic-ui.com/modules/search.html#disabled