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. Utiliza una clase para agregar CSS a los elementos.
La barra de búsqueda nos permite buscar contenido en un sitio web. Es una parte esencial de un sitio web, lo que aumenta la facilidad de encontrar el artículo deseado. La interfaz de usuario semántica nos proporciona una barra de búsqueda con estilo. Echemos un vistazo a los tipos de búsqueda de IU semántica.
Tipos de búsqueda de interfaz de usuario semántica:
- Estándar : una búsqueda de interfaz de usuario semántica estándar que se puede usar para buscar contenido en una página web.
- Categoría : se puede utilizar una búsqueda categórica para buscar contenido categórico ordenado desde una fuente remota.
- Búsqueda local : una búsqueda local busca datos en un lugar local, como almacenamiento local, almacenamiento de procesos, etc.
- Búsqueda categórica local : una búsqueda categórica local busca datos categóricos ordenados en un lugar local, como almacenamiento local, almacenamiento de procesos, etc.
Clase de búsqueda de interfaz de usuario semántica:
- search: esta clase se utiliza para crear una barra de búsqueda.
Sintaxis:
<div class="ui search">
<div class="ui icon input">
<input class="prompt" type="text" placeholder="...">
<i class="search icon"></i>
</div>
<div class="results"></div>
</div>
Ejemplo 1: En el siguiente ejemplo, hemos creado una búsqueda estándar .
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <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> </head> <body> <div class="ui container"> <h2 class="ui green header">GeeksforGeeks</h2> <h4>Semantic UI Search Types</h4> <hr> <br /> <div class="ui search"> <div class="ui icon input"> <input class="prompt" type="text" placeholder="Search Names"> <i class="search icon"></i> </div> <div class="results"></div> </div> </div> </body> </html>
Producción:
Busqueda estandar
Ejemplo 2: En el siguiente ejemplo, hemos creado una búsqueda local .
HTML
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div class="ui container">
<h2 class="ui green header">
GeeksforGeeks
</h2>
<h4>Semantic UI Search Types</h4>
<hr>
<br />
<div class="ui search">
<div class="ui icon input">
<input class="prompt" type="text"
placeholder="Search Names">
<i class="search icon"></i>
</div>
<div class="results"></div>
</div>
</div>
<script>
const names = [
{ title: 'Praneeth' },
{ title: 'Tondepu' },
{ title: 'Tej' },
{ title: 'Pranav' },
{ title: 'Srinivas' },
{ title: 'Srihita' },
{ title: 'Annie' },
]
$('.ui.search').search({
source: names
});
</script>
</body>
</html>
Producción:
Busqueda local
Ejemplo 3: En el siguiente ejemplo, hemos creado una búsqueda categórica local .
HTML
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Search Types</h4>
<hr>
<br />
<div class="ui search">
<div class="ui icon input">
<input class="prompt" type="text"
placeholder="Search Names">
<i class="search icon"></i>
</div>
<div class="results"></div>
</div>
</div>
<script>
const names = [
{ category: "Pigs", title: 'Praneeth' },
{ category: "Mouse", title: 'Tondepu' },
{ category: "Mouse", title: 'Tej' },
{ category: "Pigs", title: 'Pranav' },
{ category: "Lions", title: 'Srinivas' },
{ category: "Lions", title: 'Srihita' },
{ category: "Mouse", title: 'Annie' },
]
$('.ui.search').search({
type: 'category',
source: names
});
</script>
</body>
</html>
Producción:
Búsqueda categórica local
Ejemplo 4: En el siguiente ejemplo, creamos una búsqueda de categoría y buscamos la nacionalidad de una persona en función de su nombre utilizando la API de nacionalidad.
HTML
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Search Types</h4>
<hr>
<br />
<div class="ui category search">
<div class="ui icon input">
<input class="prompt" type="text"
placeholder="Search Nationality">
<i class="search icon"></i>
</div>
<div class="results"></div>
</div>
</div>
<script>
$('.ui.search')
.search({
apiSettings: {
url:
'https://api.nationalize.io?name={query}'
},
fields: {
results: 'country',
title: 'country_id',
probability: 'probability'
},
minCharacters: 3
});
</script>
</body>
</html>
Producción:
Búsqueda Categórica
Referencia: https://semantic-ui.com/modules/search.html