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 búsqueda local de búsqueda de interfaz de usuario semántica se utiliza para buscar elementos disponibles localmente para la función. Necesitamos especificar los elementos de la fuente de datos para el elemento de búsqueda.
Opciones de tipo de búsqueda local de búsqueda de interfaz de usuario semántica:
- fuente: Necesitamos proporcionar la fuente de datos a esta opción en forma de una lista de objetos.
Sintaxis: Necesitamos inicializar el tipo Buscar local con la opción de fuente de la siguiente manera:
$('.ui.search').search({
source: tutorials,
})
Y la fuente de datos debe ser la siguiente:
var tutorials = [
{ title: 'Data Structures' },
{ title: 'Algorithms' },
]
Ejemplo: En el siguiente ejemplo, tenemos una barra de búsqueda con un tipo de búsqueda local.
HTML
<!DOCTYPE html>
<html>
<head>
<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 Search 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 tutorials = [
{ title: 'Data Structures' },
{ title: 'Algorithms' },
{ title: 'Machine Learning' },
{ title: 'Web Development' },
{ title: 'Competitive Programming' },
{ title: 'Java' },
{ title: 'C' },
{ title: 'C#' },
{ title: 'C++' },
]
$('.ui.search').search({
source: tutorials,
})
</script>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/modules/search.html#local-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