个性化阅读
专注于IT技术分析

Framework7自动补全

本文概述

在Framework7中, 自动补全功能是一种移动友好且触摸优化的组件, 可以作为下拉列表或独立方式使用。你可以使用JavaScript方法创建和初始化自动补全实例:

myApp.autocomplete(parameters)

在这里, 参数是用于初始化自动补全实例的必需对象。


Framework7中的自动补全参数

以下是Framework7中的自动补全参数列表:

指数 参数 类型 描述
1) openIn string 它定义了如何打开可以用作下拉菜单, 弹出窗口或页面的自动补全功能。
2) source function (autocomplete, query, render) 它使用自动补全实例, 搜索查询和渲染功能来传递带有数组的匹配项。
3) valueProperty string 它指定匹配的项目对象的键的项目值。
4) limit number 它会在每个查询的自动补全中显示有限数量的项目。
5) preloader boolean 预加载器可以通过将其设置为true来指定自动补全布局。
6) preloaderColor string 它指定预加载器颜色。默认情况下, 颜色为“黑色”。
7) value array 用默认选择的值定义数组。
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) input 字符串或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>

立即测试

赞(0)
未经允许不得转载:srcmini » Framework7自动补全

评论 抢沙发

评论前必须登录!