Framework7 - Autocompletar

Descripción

Autocompletar es un componente optimizado táctil y amigable para dispositivos móviles de Framework7, que puede ser un menú desplegable o de forma independiente. Puede crear e inicializar la instancia de Autocompletar mediante el método JavaScript:

myApp.autocomplete(parameters)

Donde los parámetros son objetos obligatorios que se utilizan para inicializar la instancia de Autocompletar.

Parámetros de autocompletar

La siguiente tabla enumera los parámetros de Autocompletar disponibles en Framework7:

S. No Parámetros y descripción Tipo Defecto
1

openIn

Define cómo abrir un Autocompletar que podría usarse como menú desplegable, emergente o página.

cuerda página
2

source

Utiliza una instancia de autocompletar, una consulta de búsqueda y una función de renderizado para pasar elementos coincidentes con una matriz.

función (autocompletar, consultar, renderizar) -
3

valueProperty

Especifica el valor del elemento de la clave del objeto del elemento coincidente.

cuerda carné de identidad
4

limit

Muestra el número limitado de elementos en autocompletar por consulta.

número -
5

preloader

El precargador se puede utilizar para especificar el diseño de autocompletar configurándolo en verdadero.

booleano falso
6

preloaderColor

Especifica el color del precargador. Por defecto, el color es "negro".

cuerda -
7

value

Define la matriz con los valores seleccionados por defecto.

formación -
8

textProperty

Especifica el valor del elemento de la clave del objeto del elemento correspondiente, que se puede utilizar como título de las opciones mostradas.

cuerda texto

Parámetros de autocompletar independientes

La siguiente tabla enumera los parámetros de Autocompletar autónomos disponibles en Framework7 -

S. No Parámetros y descripción Tipo Defecto
1

opener

Es un parámetro de cadena o elemento HTML, que abrirá la página de autocompletar independiente.

cadena o HTMLElement -
2

popupCloseText

Se utiliza para cerrar la ventana emergente de autocompletar.

cuerda 'Cerca'
3

backText

Proporciona el vínculo de retroceso cuando la función de autocompletar se abre como página.

cuerda 'Atrás'
4

pageTitle

Especifica el título de la página de autocompletar.

cuerda -
5

searchbarPlaceholderText

Especifica el texto del marcador de posición de la barra de búsqueda.

cuerda 'Buscar'
6

searchbarCancelText

Define el texto del botón cancelar de la barra de búsqueda.

cuerda 'cancelar'
7

notFoundText

Muestra el texto cuando no se encuentra ningún elemento coincidente.

cuerda 'Nada Encontrado'
8

multiple

Permite seleccionar selección múltiple configurándola en verdadero.

booleano falso
9

navbarTheme

Especifica el tema de color para la barra de navegación.

cuerda -
10

backOnSelect

Cuando el usuario elige un valor, el autocompletado se cerrará estableciéndolo en verdadero.

booleano falso
11

formTheme

Especifica el tema de color para la forma.

cuerda -

Parámetros de autocompletar desplegable

La siguiente tabla enumera los parámetros de Autocompletar desplegable disponibles en Framework7 -

S. No Parámetros y descripción Tipo Defecto
1

input

Es una cadena o elemento HTML que se utiliza para la entrada de texto.

cadena o HTMLElement -
2

dropdownPlaceholderText

Especifica el texto del marcador de posición desplegable.

cuerda -
3

updateInputValueOnSelect

Puede actualizar el valor de entrada en la selección configurándolo en verdadero.

booleano cierto
4

expandInput

Puede expandir la entrada de texto en la Vista de lista para hacer visible la pantalla completa durante el menú desplegable configurando la entrada de elementos en verdadero.

booleano falso

Funciones de devolución de llamada autocompletada

La siguiente tabla enumera los parámetros de Autocompletar desplegable disponibles en Framework7 -

S. No Parámetros y descripción Tipo Defecto
1

onChange

Siempre que se cambie el valor de autocompletar, se ejecutará esta función de devolución de llamada.

función (autocompletar, valor) -
2

onOpen

Siempre que se abra autocompletar, se ejecutará esta función de devolución de llamada.

función (autocompletar) -
3

onClose

Siempre que se cierre la función de autocompletar, se ejecutará esta función de devolución de llamada.

función (autocompletar) -

Plantillas de autocompletar

La siguiente tabla enumera los parámetros de Autocompletar desplegable disponibles en Framework7 -

S. No Parámetros y descripción Tipo Defecto
1

navbarTemplate

Es una plantilla de barra de navegación de autocompletar independiente.

cuerda -
2

itemTemplate

Es un elemento de formulario template7 independiente.

cuerda -
3

dropdownTemplate

Es la plantilla desplegable template7.

cuerda -
4

dropdownItemTemplate

Es el elemento de la lista desplegable template7.

cuerda -
5

dropdownPlaceholderTemplate

Es un elemento de marcador de posición desplegable de template7.

cuerda -

Plantillas predeterminadas

A continuación se muestran los fragmentos de código de plantilla predeterminados para los parámetros de plantillas definidos anteriormente:

navbarTemplate

<div class = "navbar {{#if navbarTheme}}theme-{{navbarTheme}}{{/if}}">
   <div class = "navbar-inner">
      <div class = "left sliding">
         {{#if material}}
            <a href = "#" class = "link {{#if inPopup}}close-popup{{else}}back{{/if}} icon-only">
               <i class = "icon icon-back"></i>
            </a>
         {{else}}
            <a href = "#" class = "link {{#if inPopup}}close-popup{{else}}back{{/if}}">
               <i class = "icon icon-back"></i>
               {{#if inPopup}}
                  <span>{{popupCloseText}}</span>
               {{else}}
                  <span>{{backText}}</span>
               {{/if}}
            </a>
         {{/if}}
      </div>

      <div class = "center sliding">{{pageTitle}}</div>
      {{#if preloader}}
         <div class = "right">
            <div class = "autocomplete-preloader preloader 
               {{#if preloaderColor}}
                  preloader-{{preloaderColor}}
               {{/if}}">
            </div>
         </div>
      {{/if}}
   </div>
</div>

itemTemplate

<li>
   <label class = "label-{{inputType}} item-content">
      <input type = "{{inputType}}" name = "{{inputName}}" value = "{{value}}" {{#if selected}}checked{{/if}}>
      {{#if material}}
         <div class = "item-media">
            <i class = "icon icon-form-{{inputType}}"></i>
         </div>
            
         <div class = "item-inner">
            <div class = "item-title">{{text}}</div>
         </div>
      {{else}}
         {{#if checkbox}}
            <div class = "item-media">
               <i class = "icon icon-form-checkbox"></i>
            </div>
         {{/if}}
            
         <div class = "item-inner">
            <div class = "item-title">{{text}}</div>
         </div>
      {{/if}}
   </label>
</li>

dropdownTemplate

<div class = "autocomplete-dropdown">
   <div class = "autocomplete-dropdown-inner">
      <div class = "list-block">
         <ul></ul>
      </div>
   </div>
   
   {{#if preloader}}
      <div class = "autocomplete-preloader preloader 
         {{#if preloaderColor}}
            preloader-{{preloaderColor}}
         {{/if}}">
         {{#if material}}
            {{materialPreloaderHtml}}
         {{/if}}
      </div>
   {{/if}}
</div>

dropdownItemTemplate

<li>
   <label class = "{{#unless placeholder}}label-radio{{/unless}} item-content" data-value = "{{value}}">
      <div class = "item-inner">
         <div class = "item-title">{{text}}</div>
      </div>
   </label>
</li>

dropdownPlaceholderTemplate

<li class = "autocomplete-dropdown-placeholder">
   <div class = "item-content">
      <div class = "item-inner">
         <div class = "item-title">{{text}}</div>
      </div>
   </label>
</li>

Métodos de autocompletar

La siguiente tabla especifica los métodos de Autocompletar disponibles en Framework7:

S. No Métodos y descripción
1

myAutocomplete.params

Define los parámetros de inicialización que se pasan con el objeto.

2

myAutocomplete.value

Define la matriz con los valores seleccionados.

3

myAutocomplete.opened

Abre Autocompletar si se establece en verdadero.

4

myAutocomplete.dropdown

Especifica una instancia del menú desplegable Autocompletar.

5

myAutocomplete.popup

Especifica una instancia de la ventana emergente Autocompletar.

6

myAutocomplete.page

Especifica una instancia de página de Autocompletar.

7

myAutocomplete.pageData

Define los datos de la página Autocompletar.

8

myAutocomplete.searchbar

Define la instancia de la barra de búsqueda de Autocompletar.

Propiedades de autocompletar

La siguiente tabla especifica los métodos de Autocompletar disponibles en Framework7:

S. No Propiedades y descripción
1

myAutocomplete.open()

Abre el Autocompletar, que puede usarse como menú desplegable, ventana emergente o página.

2

myAutocomplete.close()

Cierra el Autocompletar.

3

myAutocomplete.showPreloader()

Muestra el precargador de Autocompletar.

4

myAutocomplete.hidePreloader()

Oculta el precargador de Autocompletar.

5

myAutocomplete.destroy()

Arruina la instancia del precargador de Autocompletar y elimina todos los eventos.

Ejemplo

El siguiente ejemplo demuestra el uso de parámetros de autocompletar que se esconden 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>Autocomplete</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">
               <div data-page = "home" class = "page navbar-fixed">
               
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "left"> </div>
                        <div class = "center">Autcomplete</div>
                        <div class = "right"> </div>
                     </div>
                  </div>
               
                  <div class = "page-content">
                     <div class = "content-block-title">Simple Dropdown Autocomplete</div>
                     <div class = "list-block">
                        <ul>
                           <li class = "item-content">
                              <div class = "item-title label">Country</div>
                              <div class = "item-input">
                                 <input type = "text" placeholder = "Country" id = "autocomplete-dropdown">
                              </div>
                           </li>
                        </ul>
                     </div>
                  
                     <div class = "content-block-title">Dropdown With Input Expand</div>
                     <div class = "list-block">
                        <ul>
                           <li class = "item-content">
                              <div class = "item-title label">Country</div>
                              <div class = "item-input">
                                 <input type = "text" placeholder = "Country" id = "autocomplete-dropdown-expand">
                              </div>
                           </li>
                        </ul>
                     </div>
                  
                     <div class = "content-block-title">Dropdown With All Values</div>
                     <div class = "list-block">
                        <ul>
                           <li class = "item-content">
                              <div class = "item-title label">Country</div>
                              <div class = "item-input">
                                 <input type = "text" placeholder = "Country" id = "autocomplete-dropdown-all">
                              </div>
                           </li>
                        </ul>
                     </div>
                  
                     <div class = "content-block-title">Dropdown With Placeholder</div>
                     <div class = "list-block">
                        <ul>
                           <li class = "item-content">
                              <div class = "item-title label">Country</div>
                              <div class = "item-input">
                                 <input type = "text" placeholder = "Country" id = "autocomplete-dropdown-placeholder">
                              </div>
                           </li>
                        </ul>
                     </div>
                  
                     <div class = "content-block-title">Simple Standalone Autocomplete</div>
                     <div class = "list-block">
                        <ul>
                           <li>
                              <a href = "#" id = "autocomplete-standalone" class = "item-link item-content autocomplete-opener">
                                 <input type = "hidden">
                                 <div class = "item-inner">
                                    <div class = "item-title">Favorite Country</div>
                                    <div class = "item-after"></div>
                                 </div>
                              </a>
                           </li>
                        </ul>
                     </div>
                  
                     <div class = "content-block-title">Popup Standalone Autocomplete</div>
                     <div class = "list-block">
                        <ul>
                           <li>
                              <a href = "#" id = "autocomplete-standalone-popup" class = "item-link item-content autocomplete-opener">
                                 <input type = "hidden">
                                 <div class = "item-inner">
                                    <div class = "item-title">Favorite Country</div>
                                    <div class = "item-after"></div>
                                 </div>
                              </a>
                           </li>
                        </ul>
                     </div>
                  
                     <div class = "content-block-title">Multiple Values Standalone Autocomplete</div>
                     <div class = "list-block">
                        <ul>
                           <li>
                              <a href = "#" id = "autocomplete-standalone-multiple" class = "item-link item-content autocomplete-opener">
                                 <input type = "hidden">
                                 <div class = "item-inner">
                                    <div class = "item-title">Favorite Countries</div>
                                    <div class = "item-after"></div>
                                 </div>
                              </a>
                           </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 $$  =  Dom7;
         var mainView  =  myApp.addView('.view-main');
         
         // Countries data array
         var countries  =  ('India Africa Australia NewZealand England WestIndies Scotland Zimbabwe Srilanka Bangladesh').split(' ');

         // Simple Dropdown
         var autocompleteDropdownSimple  =  myApp.autocomplete ({
            input: '#autocomplete-dropdown',
            openIn: 'dropdown',
            
            source: function (autocomplete, query, render) {
               var results  =  [];
               if (query.length === 0) {
                  render(results);
                  return;
               }
               
               // You can find matched items
               for (var i = 0; i < countries.length; i++) {
                  if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) 
                     results.push(countries[i]);
               }
               // Display the items by passing array with result items
               render(results);
            }
         });

         // Dropdown with input expand
         var autocompleteDropdownExpand = myApp.autocomplete ({
            input: '#autocomplete-dropdown-expand',
            openIn: 'dropdown',
            expandInput: true,   // expandInput used as item-input in List View will be expanded to full screen wide
                                 //during dropdown
            source: function (autocomplete, query, render) {
               var results = [];
               if (query.length === 0) {
                  render(results);
                  return;
               }
               // Find matched items
               for (var i = 0; i < countries.length; i++) {
                  if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
               }
               // Display the items by passing array with result items
               render(results);
            }
         });

         // Dropdown with all values
         var autocompleteDropdownAll = myApp.autocomplete ({
            input: '#autocomplete-dropdown-all',
            openIn: 'dropdown',
            
            source: function (autocomplete, query, render) {
               var results = [];
               
               // You can find matched items
               for (var i = 0; i < countries.length; i++) {
                  if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) 
                     results.push(countries[i]);
               }
               // Display the items by passing array with result items
               render(results);
            }
         });

         // Dropdown with placeholder
         var autocompleteDropdownPlaceholder = myApp.autocomplete ({
            input: '#autocomplete-dropdown-placeholder',
            openIn: 'dropdown',
            dropdownPlaceholderText: 'Type as "India"',
            source: function (autocomplete, query, render) {
               var results = [];
               if (query.length === 0) {
                  render(results);
                  return;
               }
               
               // You can find matched items
               for (var i = 0; i < countries.length; i++) {
                  if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) 
                     results.push(countries[i]);
               }
                  
               // Display the items by passing array with result items
               render(results);
            }
         });

         // Simple Standalone
         var autocompleteStandaloneSimple = myApp.autocomplete ({
            openIn: 'page', //open in page
            opener: $$('#autocomplete-standalone'), //link that opens autocomplete
            backOnSelect: true, //go back after we select something
            
            source: function (autocomplete, query, render) {
               var results = [];
               if (query.length === 0) {
                  render(results);
                  return;
               }
               
               // You can find matched items
               for (var i = 0; i < countries.length; i++) {
                  if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) 
                     results.push(countries[i]);
               }
               // Display the items by passing array with result items
               render(results);
            },
               
            onChange: function (autocomplete, value) {
               // Here add the item text value to item-after
               $$('#autocomplete-standalone').find('.item-after').text(value[0]);
               
               // You can add item value to input value
               $$('#autocomplete-standalone').find('input').val(value[0]);
            }
         });

         // Standalone Popup
         var autocompleteStandalonePopup = myApp.autocomplete ({
            openIn: 'popup', // Opens the Autocomplete in page
            opener: $$('#autocomplete-standalone-popup'), // It will open standalone autocomplete popup
            backOnSelect: true, //After selecting item, then go back to page
            source: function (autocomplete, query, render) {
               var results = [];
               if (query.length === 0) {
                  render(results);
                  return;
               }
            
               // You can find matched items
               for (var i = 0; i < countries.length; i++) {
                  if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
               }
            
               // Display the items by passing array with result items
               render(results);
            },
            
            onChange: function (autocomplete, value) {
               // Here add the item text value to item-after
               $$('#autocomplete-standalone-popup').find('.item-after').text(value[0]);
               
               // You can add item value to input value
               $$('#autocomplete-standalone-popup').find('input').val(value[0]);
            }
         });

         // Multiple Standalone
         var autocompleteStandaloneMultiple = myApp.autocomplete ({
            openIn: 'page', //Opens the Autocomplete in page
            opener: $$('#autocomplete-standalone-multiple'), //link that opens autocomplete
            multiple: true, //Allow multiple values
            source: function (autocomplete, query, render) {
               var results = [];
               if (query.length === 0) {
                  render(results);
                  return;
               }
               
               // You can find matched items
               for (var i = 0; i < countries.length; i++) {
                  if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
               }
               
               // Display the items by passing array with result items
               render(results);
            },
            
            onChange: function (autocomplete, value) {
               // Here add the item text value to item-after
               $$('#autocomplete-standalone-multiple').find('.item-after').text(value.join(', '));
               
               // You can add item value to input value
               $$('#autocomplete-standalone-multiple').find('input').val(value.join(', '));
            }
         });
      </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 como autocomplete.html archivo en la carpeta raíz de su servidor.

  • Abra este archivo HTML como http: //localhost/autocomplete.html y la salida se muestra como se muestra a continuación.

  • El ejemplo proporciona el autocompletado de valores en un menú desplegable simple, menú desplegable con todos los valores, menú desplegable con marcador de posición, autocompletado independiente, etc.