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.