Framework7 - Tự động hoàn thành

Sự miêu tả

Autocomplete là một thành phần được tối ưu hóa bằng cảm ứng và thân thiện với thiết bị di động của Framework7, có thể ở dạng thả xuống hoặc theo cách độc lập. Bạn có thể tạo và khởi chạy phiên bản Tự động điền bằng cách sử dụng phương pháp JavaScript -

myApp.autocomplete(parameters)

Trong đó các tham số là đối tượng bắt buộc được sử dụng để khởi tạo phiên bản Tự động điền.

Tham số tự động hoàn thành

Bảng sau liệt kê các tham số Tự động điền có sẵn trong Framework7:

S. không	Thông số & Mô tả	Kiểu	Mặc định
1	openIn Nó xác định cách mở một Tự động hoàn thành có thể được sử dụng làm trình đơn thả xuống, cửa sổ bật lên hoặc trang.	chuỗi	trang
2	source Nó sử dụng phiên bản tự động hoàn thành, truy vấn tìm kiếm và chức năng kết xuất để chuyển các mục phù hợp với mảng.	chức năng (tự động hoàn thành, truy vấn, kết xuất)	-
3	valueProperty Nó chỉ định giá trị mục của khóa của đối tượng mục phù hợp.	chuỗi	Tôi
4	limit Nó hiển thị số lượng hạn chế các mục trong tự động hoàn thành cho mỗi truy vấn.	con số	-
5	preloader Trình tải trước có thể được sử dụng để chỉ định bố cục tự động hoàn thành bằng cách đặt nó thành true.	boolean	sai
6	preloaderColor Nó chỉ định màu của trình tải trước. Theo mặc định, màu là "đen".	chuỗi	-
7	value Xác định mảng với các giá trị được chọn mặc định.	mảng	-
số 8	textProperty Nó chỉ định giá trị mục của khóa của đối tượng mục phù hợp, có thể được sử dụng làm tiêu đề của các tùy chọn được hiển thị.	chuỗi	bản văn

Tham số Tự động hoàn thành Độc lập

Bảng sau liệt kê các tham số Tự động hoàn thành Độc lập sẵn có trong Framework7:

S. không	Thông số & Mô tả	Kiểu	Mặc định
1	opener Đây là tham số phần tử chuỗi hoặc HTML, sẽ mở trang tự động hoàn thành độc lập.	chuỗi hoặc HTMLElement	-
2	popupCloseText Nó được sử dụng để đóng cửa sổ bật lên tự động điền.	chuỗi	'Đóng'
3	backText Nó cung cấp liên kết trở lại khi tự động hoàn thành được mở dưới dạng trang.	chuỗi	'Trở lại'
4	pageTitle Nó chỉ định tiêu đề trang tự động hoàn thành.	chuỗi	-
5	searchbarPlaceholderText Nó chỉ định văn bản giữ chỗ trên thanh tìm kiếm.	chuỗi	'Tìm kiếm'
6	searchbarCancelText Nó xác định văn bản nút hủy thanh tìm kiếm.	chuỗi	'hủy bỏ'
7	notFoundText Nó hiển thị văn bản khi không tìm thấy phần tử phù hợp.	chuỗi	'Không kết quả'
số 8	multiple Nó cho phép chọn nhiều lựa chọn bằng cách đặt thành true.	boolean	sai
9	navbarTheme Nó chỉ định chủ đề màu cho thanh điều hướng.	chuỗi	-
10	backOnSelect Khi người dùng chọn giá trị, tự động hoàn thành sẽ được đóng lại bằng cách đặt giá trị đó thành true.	boolean	sai
11	formTheme Nó chỉ định chủ đề màu sắc cho biểu mẫu.	chuỗi	-

Thông số tự động hoàn thành thả xuống

Bảng sau liệt kê các tham số Tự động điền thả xuống có sẵn trong Framework7:

S. không	Thông số & Mô tả	Kiểu	Mặc định
1	input Nó là chuỗi hoặc phần tử HTML được sử dụng để nhập văn bản.	chuỗi hoặc HTMLElement	-
2	dropdownPlaceholderText Nó chỉ định văn bản trình giữ chỗ thả xuống.	chuỗi	-
3	updateInputValueOnSelect Bạn có thể cập nhật giá trị đầu vào trên select bằng cách đặt nó thành true.	boolean	thật
4	expandInput Bạn có thể mở rộng đầu vào văn bản trong Chế độ xem danh sách để hiển thị toàn màn hình trong khi thả xuống bằng cách đặt mục nhập thành true.	boolean	sai

Chức năng gọi lại tự động hoàn thành

Bảng dưới đây liệt kê các tham số Tự động hoàn thành thả xuống có sẵn trong Framework7 -

S. không	Thông số & Mô tả	Kiểu	Mặc định
1	onChange Bất cứ khi nào giá trị tự động hoàn thành bị thay đổi, hàm gọi lại này sẽ được thực thi.	chức năng (tự động hoàn thành, giá trị)	-
2	onOpen Bất cứ khi nào tự động hoàn thành được mở, hàm gọi lại này sẽ được thực thi.	chức năng (tự động hoàn thành)	-
3	onClose Bất cứ khi nào tính năng tự động hoàn tất bị đóng, hàm gọi lại này sẽ được thực thi.	chức năng (tự động hoàn thành)	-

Mẫu tự động hoàn thành

Bảng sau liệt kê các tham số Tự động điền thả xuống có sẵn trong Framework7:

S. không	Thông số & Mô tả	Kiểu	Mặc định
1	navbarTemplate Đây là mẫu thanh điều hướng tự động hoàn thành độc lập.	chuỗi	-
2	itemTemplate Nó là một mục biểu mẫu template7 độc lập.	chuỗi	-
3	dropdownTemplate Đây là mẫu thả xuống template7.	chuỗi	-
4	dropdownItemTemplate Đây là mục danh sách thả xuống template7.	chuỗi	-
5	dropdownPlaceholderTemplate Đây là mục trình giữ chỗ thả xuống template7.	chuỗi	-

Mẫu mặc định

Sau đây là các đoạn mã mẫu mặc định cho các thông số mẫu đã xác định ở trên -

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>

Phương pháp tự động hoàn thành

Bảng sau chỉ định các phương pháp Tự động điền có sẵn trong Framework7:

S. không	Phương pháp & Mô tả
1	myAutocomplete.params Xác định các tham số khởi tạo được truyền với đối tượng.
2	myAutocomplete.value Nó xác định mảng với các giá trị đã chọn.
3	myAutocomplete.opened Nó sẽ mở Tự động điền nếu nó được đặt thành true.
4	myAutocomplete.dropdown Nó chỉ định một phiên bản của trình đơn thả xuống Tự động điền.
5	myAutocomplete.popup Nó chỉ định một phiên bản của cửa sổ bật lên Tự động điền.
6	myAutocomplete.page Nó chỉ định một phiên bản của trang Tự động điền.
7	myAutocomplete.pageData Nó xác định dữ liệu trang Tự động điền.
số 8	myAutocomplete.searchbar Nó xác định phiên bản thanh tìm kiếm Tự động điền.

Thuộc tính tự động hoàn thành

Bảng sau chỉ định các phương pháp Tự động điền có sẵn trong Framework7:

S. không	Thuộc tính & Mô tả
1	myAutocomplete.open() Nó mở ra Tự động điền, có thể được sử dụng làm trình đơn thả xuống, cửa sổ bật lên hoặc trang.
2	myAutocomplete.close() Nó đóng Tự động hoàn thành.
3	myAutocomplete.showPreloader() Nó hiển thị trình tải trước Tự động điền.
4	myAutocomplete.hidePreloader() Nó ẩn trình tải trước Tự động điền.
5	myAutocomplete.destroy() Nó làm hỏng phiên bản trình tải trước Tự động điền và xóa tất cả các sự kiện.

Thí dụ

Ví dụ sau minh họa việc sử dụng các tham số tự động hoàn thành ẩn trong 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>

Đầu ra

Hãy để chúng tôi thực hiện các bước sau để xem mã đã cho ở trên hoạt động như thế nào -

Lưu mã HTML đã cho ở trên dưới dạng autocomplete.html tệp trong thư mục gốc máy chủ của bạn.
Mở tệp HTML này dưới dạng http: //localhost/autocomplete.html và kết quả được hiển thị như hình dưới đây.
Ví dụ này cung cấp tính năng tự động hoàn thành các giá trị trong menu thả xuống đơn giản, menu thả xuống với tất cả các giá trị, menu thả xuống với trình giữ chỗ, tự động hoàn thành độc lập, v.v.