Framework7 - Otomatik tamamlama

Açıklama

Otomatik Tamamlama, bir Framework7'nin mobil uyumlu ve dokunmatik olarak optimize edilmiş bileşenidir, açılır menü veya bağımsız bir şekilde olabilir. JavaScript yöntemini kullanarak Otomatik Tamamlama örneğini oluşturabilir ve başlatabilirsiniz -

myApp.autocomplete(parameters)

Autocomplete örneğini başlatmak için kullanılan gerekli nesneler olduğunda parametreler .

Otomatik Tamamlama Parametreleri

Aşağıdaki tablo, Framework7'deki mevcut Otomatik Tamamlama parametrelerini listeler -

S.No	Parametreler ve Açıklama	Tür	Varsayılan
1	openIn Açılır menü, açılır pencere veya sayfa olarak kullanılabilecek bir Otomatik Tamamlamanın nasıl açılacağını tanımlar.	dizi	sayfa
2	source Otomatik tamamlama örneğini, arama sorgusunu kullanır ve eşleşen öğeleri diziyle geçirmek için işlev oluşturur.	işlev (otomatik tamamlama, sorgu, oluşturma)	-
3	valueProperty Eşleşen öğe nesnesinin anahtarının öğe değerini belirtir.	dizi	İD
4	limit Sorgu başına otomatik tamamlamada sınırlı sayıda öğeyi görüntüler.	numara	-
5	preloader Önyükleyici, otomatik tamamlama düzenini true olarak ayarlayarak belirtmek için kullanılabilir.	Boole	yanlış
6	preloaderColor Ön yükleyici rengini belirtir. Varsayılan olarak, renk "siyah" tır.	dizi	-
7	value Diziyi varsayılan seçilmiş değerlerle tanımlar.	dizi	-
8	textProperty Görüntülenen seçeneklerin başlığı olarak kullanılabilen, eşleşen öğe nesnesinin anahtarının öğe değerini belirtir.	dizi	Metin

Bağımsız Otomatik Tamamlama Parametreleri

Aşağıdaki tablo, Framework7'deki mevcut Bağımsız Otomatik Tamamlama parametrelerini listeler -

S.No	Parametreler ve Açıklama	Tür	Varsayılan
1	opener Bağımsız otomatik tamamlama sayfasını açacak olan dize veya HTML öğesi parametresidir.	string veya HTMLElement	-
2	popupCloseText Otomatik tamamlama açılır penceresini kapatmak için kullanılır.	dizi	'Kapat'
3	backText Otomatik tamamlama sayfa olarak açıldığında geri bağlantı sağlar.	dizi	'Geri'
4	pageTitle Otomatik tamamlama sayfa başlığını belirtir.	dizi	-
5	searchbarPlaceholderText Arama çubuğu yer tutucu metnini belirtir.	dizi	'Arama'
6	searchbarCancelText Arama çubuğu iptal düğmesi metnini tanımlar.	dizi	'iptal etmek'
7	notFoundText Eşleşen öğe bulunmadığında metni görüntüler.	dizi	'Hiçbirşey Bulunamadı'
8	multiple Doğru olarak ayarlayarak çoklu seçimi seçmenize izin verir.	Boole	yanlış
9	navbarTheme Gezinme çubuğunun renk temasını belirtir.	dizi	-
10	backOnSelect Kullanıcı bir değer seçtiğinde, otomatik tamamlama doğru olarak ayarlanarak kapatılacaktır.	Boole	yanlış
11	formTheme Form için renk temasını belirtir.	dizi	-

Açılır Otomatik Tamamlama Parametreleri

Aşağıdaki tablo, Framework7'de bulunan Otomatik Açılır Açılır Tamamlama parametrelerini listeler -

S.No	Parametreler ve Açıklama	Tür	Varsayılan
1	input Metin girişi için kullanılan dize veya HTML öğesidir.	string veya HTMLElement	-
2	dropdownPlaceholderText Açılır yer tutucu metnini belirtir.	dizi	-
3	updateInputValueOnSelect Giriş değerini seçimde true olarak ayarlayarak güncelleyebilirsiniz.	Boole	doğru
4	expandInput Öğe girişini doğru olarak ayarlayarak açılır menü sırasında tam ekranı görünür hale getirmek için Liste Görünümü'ndeki metin girişini genişletebilirsiniz .	Boole	yanlış

Geri Aramaları Otomatik Tamamlama İşlevleri

Aşağıdaki tablo, Framework7'de bulunan Otomatik Açılır Menüyü Tamamlama parametrelerini listeler -

S.No	Parametreler ve Açıklama	Tür	Varsayılan
1	onChange Otomatik tamamlama değeri her değiştirildiğinde, bu geri arama işlevi çalıştırılacaktır.	işlev (otomatik tamamlama, değer)	-
2	onOpen Otomatik tamamlama her açıldığında, bu geri arama işlevi yürütülecektir.	işlev (otomatik tamamlama)	-
3	onClose Otomatik tamamlama her kapatıldığında, bu geri arama işlevi yürütülecektir.	işlev (otomatik tamamlama)	-

Otomatik Tamamlama Şablonları

Aşağıdaki tablo, Framework7'de bulunan Otomatik Açılır Açılır Tamamlama parametrelerini listeler -

S.No	Parametreler ve Açıklama	Tür	Varsayılan
1	navbarTemplate Bağımsız otomatik tamamlama navbar şablonudur.	dizi	-
2	itemTemplate Bağımsız şablon7 form öğesidir.	dizi	-
3	dropdownTemplate Şablon7 açılır şablondur.	dizi	-
4	dropdownItemTemplate Şablon7 açılır liste öğesidir.	dizi	-
5	dropdownPlaceholderTemplate Şablon7 açılır yer tutucu öğesidir.	dizi	-

Varsayılan şablonlar

Aşağıda, yukarıda tanımlanan şablon parametreleri için varsayılan şablon kod parçacıkları verilmiştir -

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>

Otomatik Tamamlama Yöntemleri

Aşağıdaki tablo, Framework7'de bulunan Otomatik Tamamlama yöntemlerini belirtir -

S.No	Yöntemler ve Açıklama
1	myAutocomplete.params Nesne ile geçen başlatma parametrelerini tanımlar.
2	myAutocomplete.value Diziyi seçilen değerlerle tanımlar.
3	myAutocomplete.opened True olarak ayarlanmışsa, Otomatik Tamamlamayı açar.
4	myAutocomplete.dropdown Otomatik Tamamlama açılır listesinin bir örneğini belirtir.
5	myAutocomplete.popup Otomatik Tamamlama açılır penceresinin bir örneğini belirtir.
6	myAutocomplete.page Otomatik Tamamlama sayfasının bir örneğini belirtir.
7	myAutocomplete.pageData Otomatik Tamamlama sayfa verilerini tanımlar.
8	myAutocomplete.searchbar Otomatik Tamamlama arama çubuğu örneğini tanımlar.

Otomatik Tamamlama Özellikleri

Aşağıdaki tablo, Framework7'de bulunan Otomatik Tamamlama yöntemlerini belirtir -

S.No	Özellikler ve Açıklama
1	myAutocomplete.open() Açılır menü, açılır pencere veya sayfa olarak kullanılabilen Otomatik Tamamlamayı açar.
2	myAutocomplete.close() Otomatik Tamamlamayı kapatır.
3	myAutocomplete.showPreloader() Otomatik Tamamlama ön yükleyicisini gösterir.
4	myAutocomplete.hidePreloader() Otomatik Tamamlama ön yükleyicisini gizler.
5	myAutocomplete.destroy() Otomatik Tamamlama ön yükleyici örneğini bozar ve tüm olayları kaldırır.

Misal

Aşağıdaki örnek, Framework7'de gizlenen otomatik tamamlama parametrelerinin kullanımını gösterir -

<!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>

Çıktı

Yukarıda verilen kodun nasıl çalıştığını görmek için aşağıdaki adımları gerçekleştirelim -

Yukarıda verilen HTML kodunu farklı kaydedin autocomplete.html sunucunuzun kök klasöründeki dosya.
Bu HTML dosyasını http: //localhost/autocomplete.html olarak açın ve çıktı aşağıda gösterildiği gibi görüntülenir.
Örnek, basit açılır menüde, tüm değerlerle açılır menü, yer tutuculu açılır menü, bağımsız otomatik tamamlama vb.