自动完成是Framework7的移动友好和触摸优化组件,可以是下拉列表或独立方式.您可以使用JavaScript方法创建和初始化自动完成实例 :
myApp.autocomplete(parameters)
其中参数是用于初始化自动完成实例的必需对象.
下表列出了Framework7中可用的自动完成参数 :
S.No | 参数&说明 | 键入 | 默认 |
---|---|---|---|
1 | openIn 它定义了如何打开自动填充功能,可以用作下拉列表,弹出窗口或页面. | string | page |
2 | source 它使用自动完成实例,搜索查询和渲染函数来传递匹配的项目array. | function(autocomplete,query,render) | - |
3 | valueProperty 它指定匹配项目对象密钥的项目值. | string | id |
4 | limit 显示数量有限每个查询自动填充的商品. | 数字 | - |
5 | preloader 预加载器可用于通过将其设置为true来指定自动完成布局. | boolean | false |
6 | preloaderColor 它指定预加载器颜色.默认情况下,颜色为"黑色". | string | - |
7 | value 使用默认选定值定义数组. | array | - |
8 | textProperty 它指定匹配项对象键的项值,可用作标题显示的选项. | string | text |
下表列出了Framework7 : 中可用的独立自动完成参数;
S.No | 参数&说明 | 键入 | 默认 |
---|---|---|---|
1 | opener 这是字符串或HTML元素参数,它将打开独立的自动完成页面. | string或HTMLElement | - |
2 | popupCloseText 它用于关闭自动完成弹出窗口. | string | '关闭' |
3 | backText 当自动填充作为页面打开时,它提供反向链接. | string | '返回' |
4 | pageTitle 它指定自动填充页面标题. | 取值tring | - |
5 | searchbarPlaceholderText 它指定搜索栏占位符文本. | string | 'Search' |
6 | searchbarCancelText 它定义了搜索栏取消按钮文本. | string | '取消' |
7 | notFoundText 当找不到匹配元素时显示文本. | string | '找不到' |
8 | multiple 它允许通过将其设置为选择多个选择true. | boolean | false |
9 | navbarTheme 它指定了颜色主题navbar. | string | - |
10 | backOnSelect 当用户选择值时,自动完成将通过将其设置为true来关闭. | boolean | false |
11 | formTheme 它指定表单的颜色主题. | string | - |
下表列出了Framework7中可用的Dropdown Autocomplete参数 :
S.No | 参数&说明 | 键入 | 默认 |
---|---|---|---|
1 | input 它是用于文本输入的字符串或HTML元素. | string或HTMLElement | - |
2 | dropdownPlaceholderText 它指定了下拉占位符文本. | string | - |
3 | updateInputValueOnSelect 您可以更新输入值选择时将其设置为true. | boolean | true |
4 | expandInput 您可以通过设置扩展列表视图中的文本输入,以便在下拉期间全屏显示item-input 它为true. | boolean | false |
下表列出了可用的Dropdown Framework7中的自动填充参数 :
S .No | 参数&说明 | 键入 | 默认 |
---|---|---|---|
1 | onChange 每当更改自动完成值时,将执行此回调函数. | function( autocomplete,value) | - |
2 | onOpen 每当打开自动完成时,都会执行此回调函数. | function(autocomplete) | - |
3 | onClose 每当关闭自动完成时,将执行此回调函数. | function(autocomplete) | - |
下表列出了可用的Drop down Framework7中的自动填充参数 :
S.No | 参数&说明 | 键入 | 默认 |
---|---|---|---|
1 | navbarTemplate 它是独立的自动完成导航栏模板. | string | - |
2 | itemTemplate 它是独立的template7表单项. | string | - |
3 | dropdownTemplate 这是template7下拉模板. | string | - |
4 | dropdownItemTemplate 这是template7下拉列表项. | string | - |
5 | dropdownPlaceholderTemplate 它是template7下拉占位符项. | 字符串 | - |
以下是上面定义的模板参数的默认模板代码片段 :
<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>
<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>
<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>
<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>
<li class = "autocomplete-dropdown-placeholder"> <div class = "item-content"> <div class = "item-inner"> <div class = "item-title">{{text}}</div> </div> </label> </li>
下表指定了Framework7中可用的自动填充方法 :
S.No | 方法&说明 |
---|---|
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 它定义了自动填充搜索栏实例. |
下表指定了Framework7中可用的自动填充方法 :
S.No | 属性&说明 |
---|---|
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://img01.yuandaxia.cn/Content/img/tutorials/framework7/framework7.ios.min.css" /> <link rel = "stylesheet" href = "https://img01.yuandaxia.cn/Content/img/tutorials/framework7/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>
让我们执行以下步骤,看看上面给出的代码如何工作 : 去;
将上面给出的HTML代码保存为服务器根文件夹中的 autocomplete.html 文件.
将此HTML文件打开为http://localhost/autocomplete.html,输出显示如下.
该示例提供简单下拉列表中的值自动完成,所有值下拉列表,占位符下拉列表,独立自动完成等等.