El marco de código abierto de la interfaz de usuario semántica brinda íconos o glifos que se usan para mostrar imágenes relacionadas con algunos elementos usando CSS y jQuery que se usan para crear excelentes interfaces de usuario. Es un marco de desarrollo utilizado para crear diseños hermosos y receptivos.
La búsqueda de interfaz de usuario semántica se utiliza para permitir que el usuario busque diferentes cosas en el sitio web. La búsqueda puede ayudar a buscar blogs, herramientas, otros enlaces, etc. El tipo de categoría local de búsqueda de interfaz de usuario semántica es un tipo de búsqueda que puede buscar categorías a partir de datos locales estáticos.
Opciones de tipo de categoría local de búsqueda de IU semántica:
- tipo: Necesitamos pasar la opción de categoría a esta opción para habilitar la búsqueda de categorías.
- fuente: Aquí tenemos que pasar la fuente de datos.
Sintaxis:
-
Agregue el tipo y la fuente al tipo Buscar categoría local de la siguiente manera:
$('.ui.search').search({ type: 'category', source: categoryTutorials, }) -
Y la fuente de datos debe ser la siguiente:
var categoryTutorials = [ { category: 'Algorithms', title: 'Searching Algorithms' }, { category: 'Algorithms', title: 'Sorting Algorithms' }, { category: 'Algorithms', title: 'Graph Algorithms' }, ]
Ejemplo: En el siguiente ejemplo, tenemos el tipo de búsqueda de búsqueda de categoría local para buscar desde los datos locales.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Search Local Category Type
</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<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">
<center>
<div class="ui header green">
<h1>
GeeksforGeeks
</h1>
</div>
<strong>
Semantic UI Search Local Category Type
</strong>
</center>
<div class="ui segment">
<h1>Welcome to GeeksforGeeks</h1>
<p>Find the best programming tutorials here.</p>
<div class="ui search">
<div class="ui icon input">
<input class="prompt"
type="text"
placeholder="Search tutorials..."/>
<i class="search icon"></i>
</div>
<div class="results"></div>
</div>
</div>
</div>
<script>
var categoryTutorials = [
{ category: 'Algorithms', title: 'Searching Algorithms' },
{ category: 'Algorithms', title: 'Sorting Algorithms' },
{ category: 'Algorithms', title: 'Graph Algorithms' },
{ category: 'Algorithms', title: 'Pattern Searching' },
{ category: 'Algorithms', title: 'Geometric Algorithms' },
{ category: 'Algorithms', title: 'Mathematical' },
{ category: 'Data Structures', title: 'Arrays' },
{ category: 'Data Structures', title: 'Stack' },
{ category: 'Data Structures', title: 'Linked List' },
{ category: 'Data Structures', title: 'Heap' },
{ category: 'Data Structures', title: 'Hashing' },
{ category: 'Languages', title: 'C' },
{ category: 'Languages', title: 'C#' },
{ category: 'Languages', title: 'C++' },
{ category: 'Languages', title: 'Java' },
]
$('.ui.search').search({
type: 'category',
source: categoryTutorials,
})
</script>
</body>
</html>
Producción
Referencia: https://semantic-ui.com/modules/search.html#local-category-search
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA