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.