自动完成(Autocomplete)
描述 (Description)
自动填充是Framework7的移动友好和触摸优化组件,可以是下拉列表或独立方式。 您可以使用JavaScript方法创建和初始化自动完成实例 -
myApp.autocomplete(parameters)
其中parameters是用于初始化自动完成实例的必需对象。
自动填充参数
下表列出了Framework7中可用的自动填充参数 -
S.No | 参数和描述 | 类型 | 默认 |
---|---|---|---|
1 | openIn 它定义了如何打开自动填充功能,可以用作下拉列表,弹出窗口或页面。 | string | page |
2 | source 它使用自动完成实例,搜索查询和渲染函数来传递匹配的项目与数组。 | function (autocomplete, query, render) | - |
3 | valueProperty 它指定匹配项对象的键的项值。 | string | id |
4 | limit 它会在每个查询的自动填充中显示有限数量的项目。 | number | - |
5 | preloader 预加载器可用于通过将其设置为true来指定自动完成布局。 | boolean | false |
6 | preloaderColor 它指定预加载器颜色。 默认情况下,颜色为“黑色”。 | string | - |
7 | value 使用默认选定值定义数组。 | array | - |
8 | textProperty 它指定匹配项对象的键的项值,可用作显示选项的标题。 | string | text |
独立自动完成参数
下表列出了Framework7中可用的独立自动填充参数 -
S.No | 参数和描述 | 类型 | 默认 |
---|---|---|---|
1 | opener 它是字符串或HTML元素参数,它将打开独立的自动完成页面。 | 字符串或HTMLElement | - |
2 | popupCloseText 它用于关闭自动完成弹出窗口。 | string | 'Close' |
3 | backText 当自动填充作为页面打开时,它提供反向链接。 | string | 'Back' |
4 | pageTitle 它指定自动完成页面标题。 | string | - |
5 | searchbarPlaceholderText 它指定搜索栏占位符文本。 | string | 'Search' |
6 | searchbarCancelText 它定义了搜索栏取消按钮文本。 | string | 'cancel' |
7 | notFoundText 它在没有找到匹配元素时显示文本。 | string | 'Nothing found' |
8 | multiple 它允许通过将其设置为true来选择多个选择。 | boolean | false |
9 | navbarTheme 它指定了导航栏的颜色主题。 | string | - |
10 | backOnSelect 当用户选择值时,将通过将其设置为true来关闭自动完成。 | boolean | false |
11 | formTheme 它指定表单的颜色主题。 | string | - |
下拉自动完成参数
下表列出了Framework7中可用的Dropdown Autocomplete参数 -
S.No | 参数和描述 | 类型 | 默认 |
---|---|---|---|
1 | input 它是用于文本输入的字符串或HTML元素。 | 字符串或HTMLElement | - |
2 | dropdownPlaceholderText 它指定下拉占位符文本。 | string | - |
3 | updateInputValueOnSelect 您可以通过将其设置为true来更新select上的输入值。 | boolean | true |
4 | expandInput 您可以通过将item-input设置为true,在列表视图中展开文本输入以在下拉期间全屏显示。 | boolean | false |
自动回调功能 (Autocomplete Callbacks Functions)
下表列出了Framework7中可用的Dropdown Autocomplete参数 -
S.No | 参数和描述 | 类型 | 默认 |
---|---|---|---|
1 | onChange 每当更改自动完成值时,将执行此回调函数。 | function (autocomplete, value) | - |
2 | onOpen 每当打开自动完成时,将执行此回调函数。 | function (autocomplete) | - |
3 | onClose 每当关闭自动完成时,将执行此回调函数。 | function (autocomplete) | - |
自动填充模板
下表列出了Framework7中可用的Dropdown Autocomplete参数 -
S.No | 参数和描述 | 类型 | 默认 |
---|---|---|---|
1 | navbarTemplate 它是独立的自动完成导航栏模板。 | string | - |
2 | itemTemplate 它是独立的template7表单项。 | string | - |
3 | dropdownTemplate 它是template7下拉模板。 | string | - |
4 | dropdownItemTemplate 它是template7下拉列表项。 | string | - |
5 | dropdownPlaceholderTemplate 它是template7下拉占位符项。 | string | - |
默认模板
以下是上面定义的模板参数的默认模板代码片段 -
navbarTemplate (navbarTemplate)
<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>
itemTemplate (itemTemplate)
<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>
dropdownTemplate (dropdownTemplate)
<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>
dropdownItemTemplate
<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>
dropdownPlaceholderTemplate
<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() 它会破坏自动完成预加载器实例并删除所有事件。 |
例子 (Example)
以下示例演示了隐藏在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>
输出 (Output)
让我们执行以下步骤,看看上面给出的代码是如何工作的 -
将上面给出的HTML代码保存为服务器根文件夹中的autocomplete.html文件。
以http://localhost/autocomplete.html打开此HTML文件,输出显示如下。
该示例在简单下拉列表中提供值的自动完成,包含所有值的下拉列表,带占位符的下拉列表,独立自动完成等。