Framework7 自动完成

2025年3月17日 | 阅读 8 分钟

在 Framework7 中，自动完成是一个移动友好的、触控优化的组件，可以用作下拉列表或独立使用。您可以使用 JavaScript 方法创建和初始化自动完成实例

此处，参数是用于初始化自动完成实例的必需对象。

Framework7 中的自动完成参数

以下是 Framework7 中的自动完成参数列表

索引	参数	类型	描述
1)	openIn	string	它定义了如何打开自动完成，可以用作下拉列表、弹出窗口或页面。
2)	source	function (autocomplete, query, render)	它使用自动完成实例、搜索查询并呈现函数以传递匹配的项以及数组。
3)	valueProperty	string	它指定匹配项对象键的项目值。
4)	limit	数字	它显示每个查询中自动完成的有限数量的项目。
5)	preloader	boolean	预加载器可用于通过将其设置为 true 来指定自动完成布局。
6)	preloaderColor	string	它指定预加载器的颜色。默认情况下，颜色为“黑色”。
7)	值	数组	定义具有默认选择值的数组。
8)	textProperty	string	它指定匹配项对象键的项目值，可以用作显示选项的标题。

独立自动完成参数

索引	参数	类型	描述
1)	opener	字符串或 HTMLElement	它是一个字符串或 html 元素参数，它将打开独立的自动完成页面。
2)	popupclosetext	string	它用于关闭自动完成弹出窗口。
3)	backtext	string	当自动完成作为页面打开时，它提供后退链接。
4)	pagetitle	string	它指定自动完成页面标题。
5)	searchbarplaceholdertext	string	它指定搜索栏占位符文本。
6)	searchbarcanceltext	string	它定义搜索栏取消按钮文本。
7)	notfoundtext	string	当未找到匹配的元素时，它显示文本。
8)	multiple	boolean td>	它允许通过将其设置为 true 来进行多项选择。
9)	navbartheme	string	它指定导航栏的颜色主题。
10)	backonselect	boolean	当用户选择值时，自动完成将通过将其设置为 true 来关闭。
11)	formtheme	string	它指定表单的颜色主题。

下拉自动完成参数

下拉自动完成参数列表

索引	参数	类型	描述
1)	输入	字符串或 HTML 元素	它用于文本输入的字符串或 HTML 元素。
2)	dropdownPlaceholderText	string	它指定下拉占位符文本。
3)	updateInputValueOnSelect	boolean	它用于通过将其设置为 true 来在选择时更新输入值。
4)	expandInput	boolean	您可以通过将 item-input 设置为 true，在下拉列表可见时在列表视图中展开文本输入，使其在全屏范围内。

自动完成回调函数

索引	参数	类型	描述
1)	onChange	function (autocomplete, value)	每当自动完成值更改时，将执行此回调函数。
2)	onOpen	function (autocomplete)	每当打开自动完成时，将执行此回调函数。
3)	onClose	function (autocomplete)	每当关闭自动完成时，将执行此回调函数。

自动完成模板

索引	参数	类型	描述
1)	navbarTemplate	string	它是独立的自动完成导航栏模板。
2)	itemTemplate	string	它是独立的 template7 表单项目。
3)	dropdownTemplate	string	它是 template7 下拉模板。
4)	dropdownItemTemplate	string	它是 template7 下拉列表项。
5)	dropdownPlaceholderTemplate	string	它是 template7 下拉占位符项目。

自动完成属性

以下是 Framework7 中的自动完成属性列表

索引	性质	描述
1)	myAutocomplete.params	定义使用对象传递的初始化参数。
2)	myAutocomplete.value	它定义具有所选值的数组。
3)	myAutocomplete.opened	如果设置为 true，则打开自动完成。
4)	myAutocomplete.dropdown	它指定自动完成下拉实例。
5)	myAutocomplete.popup	它指定自动完成弹出窗口的实例。
6)	myAutocomplete.page	它指定自动完成页面的实例。
7)	myAutocomplete.pageData	它定义自动完成页面数据。
8)	myAutocomplete.searchbar	它定义自动完成搜索栏实例。

自动完成方法

以下是自动完成方法列表

索引	方法	描述
1)	myAutocomplete.open()	它打开自动完成，可以用作下拉列表、弹出窗口或页面。
2)	myAutocomplete.close()	它关闭自动完成。
3)	myAutocomplete.showPreloader()	它显示自动完成预加载器。
4)	myAutocomplete.hidePreloader()	它隐藏自动完成预加载器。
5)	myAutocomplete.destroy()	它破坏自动完成预加载器实例并删除所有事件。

自动完成示例

让我们举一个例子来演示在 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>

立即测试

下一主题Framework7 无限滚动