La interfaz de usuario semántica es un marco de programación frontal para la creación de temas comparable a Bootstrap. Es un marco de código abierto basado en CSS y jQuery. Incluye elementos semánticos prediseñados que ayudan a crear diseños atractivos, receptivos y flexibles mediante HTML.
El módulo de búsqueda en la interfaz de usuario semántica permite a un usuario consultar un conjunto de datos para obtener resultados. Se puede mostrar una colección de resultados como consecuencia de una búsqueda. Una búsqueda puede devolver resultados de material distante que están organizados por categoría. Dentro de una fuente local estática, una búsqueda puede buscar resultados.
Tipo de búsqueda de interfaz de usuario semántica:
- Estándar : este tipo de búsqueda se puede usar para crear un cuadro de búsqueda de tipo estándar y se puede usar para mostrar la lista de resultados.
- Categoría : este tipo de búsqueda se puede utilizar para crear un cuadro de búsqueda que muestre los resultados ordenados por categorías.
- Búsqueda local : esta opción de búsqueda se puede utilizar para mostrar el conjunto de resultados dentro de la fuente local de forma estática.
- Búsqueda de categoría local : esta opción de búsqueda se puede utilizar para categorizar los resultados dentro de la fuente local de forma estática.
Estados de búsqueda de interfaz de usuario semántica :
- loading: esta clase actúa como un indicador que se utiliza para mostrar el estado de carga.
Variaciones de búsqueda de IU semántica:
- Deshabilitado : Esto deshabilita la barra de búsqueda para evitar que los usuarios realicen búsquedas.
- Fluido : Esto permite que los resultados de la búsqueda se expandan para cubrir el ancho de su contenedor.
- Alineado : esta opción permite alinear los resultados en la barra de búsqueda a la izquierda o a la derecha.
Sintaxis:
<div class="ui search">
<input class="prompt" type="text">
</div>
Ejemplo 1 : este ejemplo ilustra los tipos de búsqueda de IU semántica.
- Busqueda estandar:
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Search Standard Type </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> </head> <body> <div class="ui container center aligned"> <h2 class="header ui green"> GeeksforGeeks </h2> <h3>Semantic-UI Search </h3> <div class="ui search"> <input class="prompt" type="text" placeholder="Search for articles..."> <div class="results"></div> </div> </div> </body> </html>
Salida :
- Tipo de búsqueda local:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Search Standard Type
</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>
</head>
<body>
<center>
<div class="ui container">
<h2 class="header ui green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Search</h3>
<p>Local Search Type</p>
<div class="ui search">
<div class="ui icon input">
<input class="prompt"
type="text"
placeholder="Search for tutorials..." />
<i class="search icon"></i>
</div>
<div class="results"></div>
</div>
</div>
</center>
<script>
var content = [{
title: "Python",
}, {
title: "Javascript ",
}, {
title: "Java",
}, ];
$(".ui.search").search({
source: content,
fullTextSearch: false,
});
</script>
</body>
</html>
Salida :
Ejemplo 2: este ejemplo ilustra los estados de búsqueda de la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Search Standard Type </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> </head> <body> <div class="ui container center aligned"> <h2 class="header ui green"> GeeksforGeeks </h2> <h3>Semantic-UI Search </h3> <div class="ui loading search"> <div class="ui icon input"> <input class="prompt" type="text" placeholder="Search for articles..." /> <i class="search icon"></i> </div> <div class="results"></div> </div> </div> </body> </html>
Salida :
Ejemplo 3 : este ejemplo ilustra las variaciones de búsqueda de la interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Search
</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>
</head>
<body>
<center>
<h1 class="ui green header">
GeeksforGeeks
</h1>
<h3>
Semantic UI Search Variations
</h3>
<br>
<p>Disabled search</p>
<div class="ui disabled search">
<div class="ui icon input">
<i class="search icon"></i>
<input class="prompt"
type="text"
placeholder="Search for tutorials..." />
</div>
<div class="results"></div>
</div>
<br>
<p>Fluid search</p>
<div class="ui fluid search">
<div class="ui icon input">
<i class="search icon"></i>
<input class="prompt"
type="text"
placeholder="Search for tutorials..." />
</div>
<div class="results"></div>
</div>
<br>
<p>Aligned search</p>
<div class=" ui container">
<div class="ui left aligned category search">
<div class="ui icon input">
<i class="search icon"></i>
<input class="prompt"
type="text"
placeholder="Search for tutorials...">
</div>
<div class="results"></div>
</div>
</div>
</center>
<script>
var content = [{
title: "Python",
url:
"https://www.geeksforgeeks.org/python-programming-language/",
description: `Python is a high-level,
general-purpose and a very popular
programming language.`,
}, {
title: "Javascript ",
url:
"https://www.geeksforgeeks.org/javascript/",
description: `JavaScript is the world
most popular lightweight, interpreted
compiled programming language.`
}, {
title: "Java",
url:
"https://www.geeksforgeeks.org/java/",
description: `Java is one of the most
popular and widely used programming
languages.`
}];
$(".ui.search").search({
source: content,
fullTextSearch: false,
});
</script>
</body>
</html>
Salida :
Referencia: https://semantic-ui.com/modules/search.html
Publicación traducida automáticamente
Artículo escrito por isitapol2002 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA