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.

↰ Previous page Next page ↱