Framework7 - Pelengkapan otomatis

Deskripsi

Pelengkapan otomatis adalah komponen yang ramah seluler dan dioptimalkan untuk sentuhan dari Framework7, yang dapat berupa tarik-turun atau dengan cara mandiri. Anda dapat membuat dan menginisialisasi instance Autocomplete dengan menggunakan metode JavaScript -

myApp.autocomplete(parameters)

Di mana parameter diperlukan, objek yang digunakan untuk menginisialisasi instance Autocomplete.

Parameter Pelengkapan Otomatis

Tabel berikut mencantumkan parameter Autocomplete yang tersedia di Framework7 -

S.No	Parameter & Deskripsi	Tipe	Default
1	openIn Ini mendefinisikan cara membuka Autocomplete yang dapat digunakan sebagai dropdown, popup atau halaman.	tali	halaman
2	source Ini menggunakan contoh pelengkapan otomatis, kueri penelusuran, dan fungsi render untuk mengirimkan item yang cocok dengan larik.	fungsi (pelengkapan otomatis, kueri, render)	-
3	valueProperty Ini menentukan nilai item dari kunci objek item yang cocok.	tali	Indo
4	limit Ini menampilkan jumlah item yang terbatas di pelengkapan otomatis per kueri.	jumlah	-
5	preloader Prapemuat dapat digunakan untuk menentukan tata letak pelengkapan otomatis dengan menyetelnya ke true.	boolean	Salah
6	preloaderColor Ini menentukan warna prapemuat. Secara default, warnanya adalah "hitam".	tali	-
7	value Mendefinisikan array dengan nilai default yang dipilih.	Himpunan	-
8	textProperty Ini menentukan nilai item dari kunci objek item yang cocok, yang dapat digunakan sebagai judul opsi yang ditampilkan.	tali	teks

Parameter Pelengkapan Otomatis Mandiri

Tabel berikut mencantumkan parameter Autocomplete Mandiri yang tersedia di Framework7 -

S.No	Parameter & Deskripsi	Tipe	Default
1	opener Ini adalah string atau parameter elemen HTML, yang akan membuka halaman pelengkapan otomatis mandiri.	string atau HTMLElement	-
2	popupCloseText Ini digunakan untuk menutup popup pelengkapan otomatis.	tali	'Menutup'
3	backText Ini menyediakan tautan balik ketika pelengkapan otomatis dibuka sebagai halaman.	tali	'Kembali'
4	pageTitle Ini menentukan judul halaman pelengkapan otomatis.	tali	-
5	searchbarPlaceholderText Ini menentukan teks placeholder bilah pencarian.	tali	'Cari'
6	searchbarCancelText Ini mendefinisikan teks tombol batal bilah pencarian.	tali	'membatalkan'
7	notFoundText Ini menampilkan teks ketika tidak ada elemen yang cocok ditemukan.	tali	'Tidak ada yang ditemukan'
8	multiple Ini memungkinkan untuk memilih beberapa pilihan dengan mengaturnya ke true.	boolean	Salah
9	navbarTheme Ini menentukan tema warna untuk navbar.	tali	-
10	backOnSelect Saat pengguna memilih nilai, pelengkapan otomatis akan ditutup dengan menyetelnya ke true.	boolean	Salah
11	formTheme Ini menentukan tema warna untuk formulir.	tali	-

Parameter Pelengkapan Otomatis Dropdown

Tabel berikut mencantumkan parameter Dropdown Autocomplete yang tersedia di Framework7 -

S.No	Parameter & Deskripsi	Tipe	Default
1	input Ini adalah string atau elemen HTML yang digunakan untuk input teks.	string atau HTMLElement	-
2	dropdownPlaceholderText Ini menentukan teks placeholder dropdown.	tali	-
3	updateInputValueOnSelect Anda dapat memperbarui nilai input pada select dengan menyetelnya ke true.	boolean	benar
4	expandInput Anda dapat memperluas masukan teks dalam Tampilan Daftar untuk membuat layar penuh lebar selama tarik-turun terlihat dengan menyetel masukan item ke true.	boolean	Salah

Fungsi Panggilan Balik Pelengkapan Otomatis

Tabel di bawah ini mencantumkan parameter Dropdown Autocomplete yang tersedia di Framework7 -

S.No	Parameter & Deskripsi	Tipe	Default
1	onChange Setiap kali nilai pelengkapan otomatis diubah, fungsi panggilan balik ini akan dijalankan.	fungsi (pelengkapan otomatis, nilai)	-
2	onOpen Setiap kali pelengkapan otomatis dibuka, fungsi panggilan balik ini akan dijalankan.	fungsi (pelengkapan otomatis)	-
3	onClose Setiap kali pelengkapan otomatis ditutup, fungsi panggilan balik ini akan dijalankan.	fungsi (pelengkapan otomatis)	-

Template Pelengkapan Otomatis

Tabel berikut mencantumkan parameter Dropdown Autocomplete yang tersedia di Framework7 -

S.No	Parameter & Deskripsi	Tipe	Default
1	navbarTemplate Ini adalah template navbar pelengkapan otomatis mandiri.	tali	-
2	itemTemplate Ini adalah item formulir template7 mandiri.	tali	-
3	dropdownTemplate Ini adalah template dropdown template7.	tali	-
4	dropdownItemTemplate Ini adalah item daftar dropdown template7.	tali	-
5	dropdownPlaceholderTemplate Ini adalah item placeholder dropdown template7.	tali	-

Template default

Berikut adalah cuplikan kode template default untuk parameter template yang ditentukan di atas -

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>

Metode Pelengkapan Otomatis

Tabel berikut menentukan metode Autocomplete yang tersedia di Framework7 -

S.No	Metode & Deskripsi
1	myAutocomplete.params Mendefinisikan parameter inisialisasi yang diteruskan dengan objek.
2	myAutocomplete.value Ini mendefinisikan array dengan nilai yang dipilih.
3	myAutocomplete.opened Ini membuka Autocomplete jika disetel ke true.
4	myAutocomplete.dropdown Ini menentukan instance drop-down Pelengkapan Otomatis.
5	myAutocomplete.popup Ini menentukan contoh popup Pelengkapan Otomatis.
6	myAutocomplete.page Ini menentukan contoh halaman Pelengkapan Otomatis.
7	myAutocomplete.pageData Ini mendefinisikan data halaman Autocomplete.
8	myAutocomplete.searchbar Ini mendefinisikan contoh bilah pencarian Pelengkapan Otomatis.

Properti Pelengkapan Otomatis

Tabel berikut menentukan metode Autocomplete yang tersedia di Framework7 -

S.No	Properti & Deskripsi
1	myAutocomplete.open() Ini membuka Autocomplete, yang dapat digunakan sebagai dropdown, popup atau halaman.
2	myAutocomplete.close() Ini menutup Autocomplete.
3	myAutocomplete.showPreloader() Ini menunjukkan prapemuat Autocomplete.
4	myAutocomplete.hidePreloader() Ini menyembunyikan prapemuat Autocomplete.
5	myAutocomplete.destroy() Ini merusak instance prapemuat Autocomplete dan menghapus semua acara.

Contoh

Contoh berikut menunjukkan penggunaan parameter pelengkapan otomatis yang bersembunyi di 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>

Keluaran

Mari kita lakukan langkah-langkah berikut untuk melihat bagaimana kode yang diberikan di atas bekerja -

Simpan kode HTML yang diberikan di atas sebagai autocomplete.html file di folder root server Anda.
Buka file HTML ini sebagai http: //localhost/autocomplete.html dan hasilnya ditampilkan seperti di bawah ini.
Contoh ini menyediakan nilai pelengkapan otomatis dalam tarik-turun sederhana, tarik-turun dengan semua nilai, tarik-turun dengan placeholder, pelengkapan otomatis mandiri, dll.