本文概述

• 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	它指定表单的颜色主题。

下拉列表自动补全参数【Framework7自动补全】下拉列表自动补全参数：

指数	参数	类型	描述
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 = "http://www.srcmini.com/#" 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 = "http://www.srcmini.com/#" 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 = "http://www.srcmini.com/#" 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="http://img.readke.com/220423/0IHR920-0.jpg"> < /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 somethingsource: 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>

立即测试

推荐阅读

• 

  南宁：房贷利率新政实施后买房能省多少钱？
• 

  drive|希捷推出 Xbox 专用外置 SSD：1TB 约 1095元，USB 3.2 Gen1 接口
• 

  农户贷款如何界定 「一般农户指什么」
• 

  java用什么软件写代码，JAVA用什么软件编写
• 

  不要吃发物 不要吃过甜过咸和酸性的食物
• 

  八角金盘的介绍-八角金盘的作用
• 

  flutter添加横线，flutter虚线边框
• 

  为什么戒烟后会发胖？
• 

  佛珠多肉烂根怎么办 佛珠多肉烂了怎么办
• 

  中国知名菜刀有什么牌子？中国十大菜刀品牌排行
• 

  从入门到精通，轻松应对各种错误 打印机1700代码解析
• 

  水果礼盒制作步骤大全图解 水果礼盒的制作技巧是怎么样的
• 

  支付宝花呗当面花怎么使用？使用方法及店铺详细介绍
• 

  恒为科技的军方服务器具有怎样的性能？ 恒为科技军方服务器怎么样
• 

  gis中画的图成无效的书签，gis图没了
• 

  工商银行主要业务有哪些
• 

  iphone皮套
• 

  爱普生1430喷墨机清零
• 

  关于vb.neteval的信息
• 

  非诚勿扰影视产业分析

• Framework7无限滚动
• 日历参数
• 日历方法和属性
• 访问日历的实例
• 两个值和3D旋转效果
• 单值选取器
• Framework7内联选择器/日期时间
• Framework7依赖值
• Framework7选择器