srcmini本文概述
在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>立即测试
评论前必须登录！
注册