Framework7 - Barra de búsqueda
Descripción
Framework 7 permite buscar los elementos usando la clase de barra de búsqueda .
Parámetros de la barra de búsqueda
| S. No | Parámetros y descripción | Tipo | Defecto |
|---|---|---|---|
| 1 | searchList Busca en el selector CSS o elemento HTML de la lista. |
cadena o elemento HTML | - |
| 2 | searchIn Puede buscar los elementos de la vista de lista de los selectores CSS, también busca los elementos pasando las clases .item-title , .item-text . |
cuerda | '.item-title' |
| 3 | found Busca el selector de CSS o el elemento HTML usando el elemento "encontrado". Además, usa el elemento .searchbar-found si no hay ningún elemento especificado. |
cadena o elemento HTML | - |
| 4 | notfound Busca en el selector de CSS o en el elemento HTML utilizando el elemento "no encontrado". Además, usa el elemento .searchbar-not-found si no hay ningún elemento especificado. |
cadena o elemento HTML | - |
| 5 | overlay Busca en el selector CSS o elemento HTML usando el elemento "searchbar overlay" y usa el elemento .searchbar-overlay , si no hay ningún elemento especificado. |
cadena o elemento HTML | - |
| 6 | ignore Puede ignorar el selector de CSS para elementos utilizando la barra de búsqueda. |
cuerda | '.searchbar-ignore' |
| 7 | customSearch Cuando está habilitada, la barra de búsqueda no buscará a través de ninguno de los bloques de lista especificados por searchList y se le permitirá utilizar la función de búsqueda personalizada. |
booleano | falso |
| 8 | removeDiacritics Al buscar un elemento, elimine los signos diacríticos habilitando este parámetro. |
booleano | falso |
| 9 | hideDividers Este parámetro ocultará los divisores de elementos y el título del grupo, si no hay elementos. |
booleano | cierto |
| 10 | hideGroups Este parámetro ocultará los grupos, si no se encuentran elementos en los grupos de vista de lista. |
booleano | cierto |
Devolución de llamada de la barra de búsqueda
| S. No | Devolución de llamada y descripción | Tipo | Defecto |
|---|---|---|---|
| 1 | onSearch Este método activará la función de devolución de llamada mientras realiza la búsqueda. |
función (es) | - |
| 2 | onEnable Este método activará la función de devolución de llamada cuando la barra de búsqueda se active. |
función (es) | - |
| 3 | onDisable Este método activará la función de devolución de llamada cuando la barra de búsqueda se vuelva inactiva. |
función (es) | - |
| 4 | onClear Este método activará la función de devolución de llamada cuando haga clic en el elemento "borrar". |
función (es) | - |
Propiedades de la barra de búsqueda
| S. No | Propiedades y descripción |
|---|---|
| 1 | mySearchbar.params Representa los parámetros inicializados pasados con el objeto. |
| 2 | mySearchbar.query Busca la consulta actual. |
| 3 | mySearchbar.searchList Define el bloque de la lista de búsqueda. |
| 4 | mySearchbar.container Define el contenedor de la barra de búsqueda con el elemento HTML. |
| 5 | mySearchbar.input Define la entrada de la barra de búsqueda con el elemento HTML. |
| 6 | mySearchbar.active Define si la barra de búsqueda está habilitada o deshabilitada. |
Métodos de la barra de búsqueda
| S. No | Métodos y descripción |
|---|---|
| 1 | mySearchbar.search(query); Este método busca la consulta pasada. |
| 2 | mySearchbar.enable(); Habilita la barra de búsqueda. |
| 3 | mySearchbar.disable(); Desactiva la barra de búsqueda. |
| 4 | mySearchbar.clear(); Puede borrar la consulta y los resultados de la búsqueda. |
| 5 | mySearchbar.destroy(); Destruye la instancia de la barra de búsqueda. |
Eventos de JavaScript de la barra de búsqueda
| S. No | Descripción del evento | Objetivo |
|---|---|---|
| 1 | search Puede disparar este evento mientras busca elementos. |
<div class = "list-block"> |
| 2 | clearSearch Este evento se activará cuando el usuario haga clic en el elemento clearSearch. |
<div class = "list-block"> |
| 3 | enableSearch Cuando la barra de búsqueda se habilita, este evento se activará. |
<div class = "list-block"> |
| 4 | disableSearch Cuando la barra de búsqueda se desactiva y el usuario hace clic en el botón cancelar o en el elemento "barra de búsqueda superpuesta", este evento se activará. |
<div class = "list-block"> |
Ejemplo
El siguiente ejemplo demuestra el uso de la barra de búsqueda en scroll en Framework7 -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Search Bar Layout</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages navbar-fixed">
<div data-page = "home" class = "page">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">Search Bar Layout</div>
</div>
</div>
<form data-search-list = ".list-block-search" data-search-in = ".item-title"
class = "searchbar searchbar-init">
<div class = "searchbar-input">
<input type = "search" placeholder = "Search"><a href = "#"
class = "searchbar-clear"></a>
</div>
<a href = "#" class = "searchbar-cancel">Cancel</a>
</form>
<div class = "searchbar-overlay"></div>
<div class = "page-content">
<div class = "content-block searchbar-not-found">
<div class = "content-block-inner">No element found...</div>
</div>
<div class = "list-block list-block-search searchbar-found">
<ul>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">India</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Argentina</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Belgium</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Brazil</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Canada</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Colombia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Denmark</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Ecuador</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">France</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Germany</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Greece</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Haiti</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Hong Kong</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Iceland</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Ireland</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Jamaica</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Japan</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Kenya</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Kuwait</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Libya</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Liberia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Malaysia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Mauritius</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Mexico</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Namibia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">New Zealand</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Oman</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Paraguay</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Philippines</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Russia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Singapore</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">South Africa</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Thailand</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">United Kingdom</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Vatican City</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Zimbabwe</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var mainView = myApp.addView('.view-main');
</script>
</body>
</html>Salida
Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:
Guarde el código HTML proporcionado anteriormente search_bar.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/search_bar.html y la salida se muestra como se muestra a continuación.
Si el elemento contenido en la lista se ingresa en la barra de búsqueda, muestra ese elemento en particular de la lista.
Si se ingresa el elemento distinto de los elementos contenidos en la lista, no muestra ningún elemento encontrado.