myApp.autocomplete(parameters)
S.No | 参数和说明 | 输入 | 默认 |
1 |
openIn
它定义了如何打开可用作下拉菜单、弹出菜单或页面的自动完成功能。
|
string | 页面 |
2 |
source
它使用自动完成实例,搜索查询和渲染功能来传递匹配的项目与array。
|
function (autocomplete, query, render) | - |
3 |
valueProperty
它指定匹配项对象的键的项值。
|
string | id |
4 |
limit
它显示每个查询的自动完成项目的数量有限。
|
number | - |
5 |
preloader
Preloader 可用于通过将其设置为 true 来指定自动完成布局。
|
boolean | false |
6 |
preloaderColor
它指定预加载器颜色。默认情况下,颜色为"黑色"。
|
string | - |
7 |
value
使用默认选定值定义array。
|
array | - |
8 |
textProperty
指定匹配的item对象的key的item值,可以作为显示选项的标题。
|
string | 文字 |
S.No | 参数和说明 | 输入 | 默认 |
1 |
opener
它是string或HTML元素参数,将打开独立的自动完成页面。
|
string或 HTMLElement | - |
2 |
popupCloseText
用于关闭自动完成弹窗。
|
string | '关闭' |
3 |
backText
当自动完成作为页面打开时提供返回链接。
|
string | '返回' |
4 |
pageTitle
它指定自动完成页面标题。
|
string | - |
5 |
searchbarPlaceholderText
它指定搜索栏占位符文本。
|
string | '搜索' |
6 |
searchbarCancelText
它定义了搜索栏取消按钮的文本。
|
string | '取消' |
7 |
notFoundText
当没有找到匹配的元素时显示文本。
|
string | '没有找到' |
8 |
multiple
它允许通过将其设置为true来选择多个选择。
|
boolean | false |
9 |
navbarTheme
它指定导航栏的颜色主题。
|
string | - |
10 |
backOnSelect
当用户选择值时,自动完成将通过将其设置为 true 来关闭。
|
boolean | false |
11 |
formTheme
指定表单的颜色主题。
|
string | - |
S.No | 参数和说明 | 输入 | 默认 |
1 |
input
用于文本输入的string或HTML元素。
|
string或 HTMLElement | - |
2 |
dropdownPlaceholderText
它指定下拉占位符文本。
|
string | - |
3 |
updateInputValueOnSelect
您可以通过将输入值设置为真来更新选择时的输入值。
|
boolean | true |
4 |
expandInput
您可以通过设置
item-input 来扩展列表视图中的文本输入以使下拉期间全屏可见这是真的。
|
boolean | false |
S.No | 参数和说明 | 输入 | 默认 |
1 |
onChange
每当自动完成值改变时,这个回调函数就会被执行。
|
function (autocomplete, value) | - |
2 |
onOpen
每当打开自动完成功能时,都会执行此回调函数。
|
function (autocomplete) | - |
3 |
onClose
每当自动完成关闭时,将执行此回调函数。
|
function (autocomplete) | - |
S.No | 参数和说明 | 输入 | 默认 |
1 |
navbarTemplate
它是独立的自动完成导航栏模板。
|
string | - |
2 |
itemTemplate
它是独立的模板7表单项。
|
string | - |
3 |
dropdownTemplate
是template7下拉模板。
|
string | - |
4 |
dropdownItemTemplate
这是模板7下拉列表项。
|
string | - |
5 |
dropdownPlaceholderTemplate
它是template7下拉占位符项。
|
string | - |
<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>
S.No | 方法和说明 |
1 |
myAutocomplete.params
定义与对象一起传递的初始化参数。
|
2 |
myAutocomplete.value
它定义了具有选定值的array。
|
3 |
myAutocomplete.opened
如果设置为 true,它会打开自动完成。
|
4 |
myAutocomplete.dropdown
它指定一个自动完成下拉的实例。
|
5 |
myAutocomplete.popup
它指定了一个自动完成弹出窗口的实例。
|
6 |
myAutocomplete.page
它指定了一个自动完成页面的实例。
|
7 |
myAutocomplete.pageData
它定义了自动完成页面数据。
|
8 |
myAutocomplete.searchbar
它定义了自动完成搜索栏实例。
|
S.No | 属性和描述 |
1 |
myAutocomplete.open()
它打开自动完成,可以用作下拉菜单、弹出窗口或页面。
|
2 |
myAutocomplete.close()
它关闭自动完成。
|
3 |
myAutocomplete.showPreloader()
它显示自动完成预加载器。
|
4 |
myAutocomplete.hidePreloader()
它隐藏了自动完成预加载器。
|
5 |
myAutocomplete.destroy()
它破坏了自动完成预加载器实例并删除了所有事件。
|
<!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>