Framework7 - Completamento automatico

Descrizione

Il completamento automatico è un componente ottimizzato per il tocco e ottimizzato per i dispositivi mobili di Framework7, che può essere a discesa o in modalità standalone. È possibile creare e inizializzare l'istanza di completamento automatico utilizzando il metodo JavaScript:

myApp.autocomplete(parameters)

Dove i parametri sono oggetti obbligatori utilizzati per inizializzare l'istanza di completamento automatico.

Parametri di completamento automatico

La tabella seguente elenca i parametri di completamento automatico disponibili in Framework7 -

S.No	Parametri e descrizione	genere	Predefinito
1	openIn Definisce come aprire un completamento automatico che potrebbe essere utilizzato come menu a discesa, popup o pagina.	corda	pagina
2	source Utilizza l'istanza di completamento automatico, la query di ricerca e la funzione di rendering per passare gli elementi corrispondenti con l'array.	funzione (completamento automatico, query, rendering)	-
3	valueProperty Specifica il valore dell'elemento della chiave dell'oggetto dell'elemento corrispondente.	corda	id
4	limit Visualizza il numero limitato di elementi nel completamento automatico per query.	numero	-
5	preloader Il preloader può essere utilizzato per specificare il layout del completamento automatico impostandolo su true.	booleano	falso
6	preloaderColor Specifica il colore del precaricatore. Per impostazione predefinita, il colore è "nero".	corda	-
7	value Definisce la matrice con i valori selezionati di default.	Vettore	-
8	textProperty Specifica il valore dell'elemento della chiave dell'oggetto dell'elemento corrispondente, che può essere utilizzato come titolo delle opzioni visualizzate.	corda	testo

Parametri di completamento automatico autonomo

La tabella seguente elenca i parametri di completamento automatico autonomo disponibili in Framework7:

S.No	Parametri e descrizione	genere	Predefinito
1	opener È un parametro stringa o elemento HTML, che aprirà la pagina di completamento automatico autonomo.	stringa o HTMLElement	-
2	popupCloseText Viene utilizzato per chiudere il popup di completamento automatico.	corda	'Vicino'
3	backText Fornisce il collegamento a ritroso quando il completamento automatico viene aperto come pagina.	corda	'Indietro'
4	pageTitle Specifica il titolo della pagina di completamento automatico.	corda	-
5	searchbarPlaceholderText Specifica il testo segnaposto della barra di ricerca.	corda	'Ricerca'
6	searchbarCancelText Definisce il testo del pulsante di annullamento della barra di ricerca.	corda	'Annulla'
7	notFoundText Visualizza il testo quando non è stato trovato alcun elemento corrispondente.	corda	'Non abbiamo trovato nulla'
8	multiple Consente di selezionare più selezioni impostandola su true.	booleano	falso
9	navbarTheme Specifica il tema del colore per la barra di navigazione.	corda	-
10	backOnSelect Quando l'utente sceglie un valore, il completamento automatico verrà chiuso impostandolo su true.	booleano	falso
11	formTheme Specifica il tema del colore per il modulo.	corda	-

Parametri di completamento automatico a discesa

La tabella seguente elenca i parametri di completamento automatico a discesa disponibili in Framework7 -

S.No	Parametri e descrizione	genere	Predefinito
1	input È una stringa o un elemento HTML utilizzato per l'immissione di testo.	stringa o HTMLElement	-
2	dropdownPlaceholderText Specifica il testo segnaposto a discesa.	corda	-
3	updateInputValueOnSelect È possibile aggiornare il valore di input su select impostandolo su true.	booleano	vero
4	expandInput È possibile espandere l'input di testo nella visualizzazione elenco per rendere visibile lo schermo intero durante il menu a discesa impostando l' input dell'elemento su true.	booleano	falso

Funzioni di callback di completamento automatico

La tabella seguente elenca i parametri di completamento automatico a discesa disponibili in Framework7 -

S.No	Parametri e descrizione	genere	Predefinito
1	onChange Ogni volta che il valore di completamento automatico viene modificato, verrà eseguita questa funzione di callback.	funzione (completamento automatico, valore)	-
2	onOpen Ogni volta che viene aperto il completamento automatico, verrà eseguita questa funzione di callback.	funzione (completamento automatico)	-
3	onClose Ogni volta che il completamento automatico viene chiuso, verrà eseguita questa funzione di callback.	funzione (completamento automatico)	-

Modelli a completamento automatico

La tabella seguente elenca i parametri di completamento automatico a discesa disponibili in Framework7 -

S.No	Parametri e descrizione	genere	Predefinito
1	navbarTemplate È un modello di barra di navigazione autonomo a completamento automatico.	corda	-
2	itemTemplate È un elemento del modulo template7 autonomo.	corda	-
3	dropdownTemplate È il modello a discesa template7.	corda	-
4	dropdownItemTemplate È l'elemento dell'elenco a discesa template7.	corda	-
5	dropdownPlaceholderTemplate È l'elemento segnaposto a discesa template7.	corda	-

Modelli predefiniti

Di seguito sono riportati gli snippet di codice del modello predefinito per i parametri dei modelli sopra definiti:

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>

Metodi di completamento automatico

La tabella seguente specifica i metodi di completamento automatico disponibili in Framework7:

S.No	Metodi e descrizione
1	myAutocomplete.params Definisce i parametri di inizializzazione che vengono passati con object.
2	myAutocomplete.value Definisce l'array con i valori selezionati.
3	myAutocomplete.opened Apre il completamento automatico se è impostato su true.
4	myAutocomplete.dropdown Specifica un'istanza dell'elenco a discesa Completamento automatico.
5	myAutocomplete.popup Specifica un'istanza del popup di completamento automatico.
6	myAutocomplete.page Specifica un'istanza della pagina di completamento automatico.
7	myAutocomplete.pageData Definisce i dati della pagina di completamento automatico.
8	myAutocomplete.searchbar Definisce l'istanza della barra di ricerca del completamento automatico.

Proprietà di completamento automatico

La tabella seguente specifica i metodi di completamento automatico disponibili in Framework7:

S.No	Proprietà e descrizione
1	myAutocomplete.open() Apre il completamento automatico, che può essere utilizzato come menu a discesa, popup o pagina.
2	myAutocomplete.close() Chiude il completamento automatico.
3	myAutocomplete.showPreloader() Mostra il precaricatore di completamento automatico.
4	myAutocomplete.hidePreloader() Nasconde il precaricatore di completamento automatico.
5	myAutocomplete.destroy() Rovina l'istanza del preloader di completamento automatico e rimuove tutti gli eventi.

Esempio

L'esempio seguente mostra l'uso di parametri di completamento automatico nascosti nel 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>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:

Salva il codice HTML sopra indicato come autocomplete.html file nella cartella principale del server.
Apri questo file HTML come http: //localhost/autocomplete.html e l'output viene visualizzato come mostrato di seguito.
L'esempio fornisce il completamento automatico dei valori in un semplice menu a discesa, elenco a discesa con tutti i valori, elenco a discesa con segnaposto, completamento automatico autonomo ecc.

↰ Previous page Next page ↱

Framework7 - Completamento automatico

Descrizione

Parametri di completamento automatico

Parametri di completamento automatico autonomo

Parametri di completamento automatico a discesa

Funzioni di callback di completamento automatico

Modelli a completamento automatico

Modelli predefiniti

navbarTemplate

itemTemplate

dropdownTemplate

dropdownItemTemplate

dropdownPlaceholderTemplate

Metodi di completamento automatico

Proprietà di completamento automatico

Esempio

Produzione

Componenti Framework7

Framework7 clic veloci

Framework7 Styling

Modelli Framework7

Tutorial di Framework7

Framework7 Risorse utili