Автозаполнение — это удобный для мобильных устройств и оптимизированный для сенсорных устройств компонент Framework7, который может быть как раскрывающимся, так и автономным. Вы можете создать и инициализировать экземпляр автозаполнения, используя метод JavaScript —
myApp.autocomplete(parameters)
Где параметры — обязательные объекты, используемые для инициализации экземпляра автозаполнения.
Параметры автозаполнения
В следующей таблице перечислены доступные параметры автозаполнения в Framework7 —
| S.No | Параметры и описание | Тип | По умолчанию |
|---|---|---|---|
| 1 |
открыть в Он определяет, как открыть автозаполнение, которое можно использовать в качестве раскрывающегося списка, всплывающего окна или страницы. |
строка | страница |
| 2 |
источник Он использует автозаполнение экземпляра, поисковый запрос и функцию рендеринга для передачи сопоставленных элементов с массивом. |
функция (автозаполнение, запрос, рендер) | — |
| 3 |
valueProperty Указывает значение элемента ключа объекта соответствующего элемента. |
строка | Я бы |
| 4 |
предел Он отображает ограниченное количество элементов в автозаполнении на запрос. |
число | — |
| 5 |
прелоадер Preloader можно использовать для указания макета автозаполнения, установив его в true. |
логический | ложный |
| 6 |
preloaderColor Это определяет цвет preloader. По умолчанию цвет «черный». |
строка | — |
| 7 |
значение Определяет массив с выбранными значениями по умолчанию. |
массив | — |
| 8 |
TextProperty Он указывает значение элемента ключа объекта сопоставленного элемента, которое можно использовать в качестве заголовка отображаемых параметров. |
строка | текст |
открыть в
Он определяет, как открыть автозаполнение, которое можно использовать в качестве раскрывающегося списка, всплывающего окна или страницы.
источник
Он использует автозаполнение экземпляра, поисковый запрос и функцию рендеринга для передачи сопоставленных элементов с массивом.
valueProperty
Указывает значение элемента ключа объекта соответствующего элемента.
предел
Он отображает ограниченное количество элементов в автозаполнении на запрос.
прелоадер
Preloader можно использовать для указания макета автозаполнения, установив его в true.
preloaderColor
Это определяет цвет preloader. По умолчанию цвет «черный».
значение
Определяет массив с выбранными значениями по умолчанию.
TextProperty
Он указывает значение элемента ключа объекта сопоставленного элемента, которое можно использовать в качестве заголовка отображаемых параметров.
Автономные параметры автозаполнения
В следующей таблице перечислены доступные параметры Автономного автозаполнения в Framework7 —
| S.No | Параметры и описание | Тип | По умолчанию |
|---|---|---|---|
| 1 |
открывашка Это параметр строки или элемента HTML, который откроет отдельную страницу автозаполнения. |
строка или HTMLElement | — |
| 2 |
popupCloseText Он используется для закрытия всплывающего окна автозаполнения. |
строка | ‘Близко’ |
| 3 |
backText Он предоставляет обратную ссылку, когда автозаполнение открывается как страница. |
строка | «Назад» |
| 4 |
Заголовок страницы Указывает заголовок страницы автозаполнения. |
строка | — |
| 5 |
searchbarPlaceholderText Указывает текст заполнителя панели поиска. |
строка | ‘Поиск’ |
| 6 |
searchbarCancelText Он определяет строку поиска кнопки отмены текста. |
строка | ‘отменить’ |
| 7 |
notFoundText Он отображает текст, когда не найдено соответствующего элемента. |
строка | ‘Ничего не найдено’ |
| 8 |
множественный Это позволяет выбрать множественный выбор, установив его в true. |
логический | ложный |
| 9 |
navbarTheme Он определяет цветовую тему для navbar. |
строка | — |
| 10 |
backOnSelect Когда пользователь выберет значение, автозаполнение будет закрыто, установив для него значение true. |
логический | ложный |
| 11 |
formTheme Он определяет цветовую тему для формы. |
строка | — |
открывашка
Это параметр строки или элемента HTML, который откроет отдельную страницу автозаполнения.
popupCloseText
Он используется для закрытия всплывающего окна автозаполнения.
backText
Он предоставляет обратную ссылку, когда автозаполнение открывается как страница.
Заголовок страницы
Указывает заголовок страницы автозаполнения.
searchbarPlaceholderText
Указывает текст заполнителя панели поиска.
searchbarCancelText
Он определяет строку поиска кнопки отмены текста.
notFoundText
Он отображает текст, когда не найдено соответствующего элемента.
множественный
Это позволяет выбрать множественный выбор, установив его в true.
navbarTheme
Он определяет цветовую тему для navbar.
backOnSelect
Когда пользователь выберет значение, автозаполнение будет закрыто, установив для него значение true.
formTheme
Он определяет цветовую тему для формы.
Параметры автозаполнения выпадающего списка
В следующей таблице перечислены доступные параметры автозаполнения раскрывающегося списка в Framework7 —
| S.No | Параметры и описание | Тип | По умолчанию |
|---|---|---|---|
| 1 |
вход Это строка или элемент HTML, используемый для ввода текста. |
строка или HTMLElement | — |
| 2 |
dropdownPlaceholderText Определяет раскрывающийся текст заполнителя. |
строка | — |
| 3 |
updateInputValueOnSelect Вы можете обновить входное значение на select, установив его в true. |
логический | правда |
| 4 |
expandInput Вы можете расширить ввод текста в представлении списка, чтобы сделать его полноэкранным во время раскрывающегося списка, установив для элемента input значение true. |
логический | ложный |
вход
Это строка или элемент HTML, используемый для ввода текста.
dropdownPlaceholderText
Определяет раскрывающийся текст заполнителя.
updateInputValueOnSelect
Вы можете обновить входное значение на select, установив его в true.
expandInput
Вы можете расширить ввод текста в представлении списка, чтобы сделать его полноэкранным во время раскрывающегося списка, установив для элемента input значение true.
Функции автозаполнения обратных вызовов
В приведенной ниже таблице перечислены доступные параметры автозаполнения раскрывающегося списка в Framework7 —
| S.No | Параметры и описание | Тип | По умолчанию |
|---|---|---|---|
| 1 |
по изменению Всякий раз, когда значение автозаполнения изменяется, эта функция обратного вызова будет выполняться. |
функция (автозаполнение, значение) | — |
| 2 |
OnOpen Всякий раз, когда автозаполнение открывается, эта функция обратного вызова будет выполняться. |
функция (автозаполнение) | — |
| 3 |
OnClose Всякий раз, когда автозаполнение закрыто, эта функция обратного вызова будет выполняться. |
функция (автозаполнение) | — |
по изменению
Всякий раз, когда значение автозаполнения изменяется, эта функция обратного вызова будет выполняться.
OnOpen
Всякий раз, когда автозаполнение открывается, эта функция обратного вызова будет выполняться.
OnClose
Всякий раз, когда автозаполнение закрыто, эта функция обратного вызова будет выполняться.
Автозаполнение шаблонов
В следующей таблице перечислены доступные параметры автозаполнения раскрывающегося списка в Framework7 —
| S.No | Параметры и описание | Тип | По умолчанию |
|---|---|---|---|
| 1 |
navbarTemplate Это автономный шаблон автозаполнения навигационной панели. |
строка | — |
| 2 |
ItemTemplate Это отдельный элемент формы template7. |
строка | — |
| 3 |
dropdownTemplate Это шаблон drop7 шаблона. |
строка | — |
| 4 |
dropdownItemTemplate Это элемент раскрывающегося списка template7. |
строка | — |
| 5 |
dropdownPlaceholderTemplate Это заполнитель раскрывающегося меню template7. |
строка | — |
navbarTemplate
Это автономный шаблон автозаполнения навигационной панели.
ItemTemplate
Это отдельный элемент формы template7.
dropdownTemplate
Это шаблон drop7 шаблона.
dropdownItemTemplate
Это элемент раскрывающегося списка template7.
dropdownPlaceholderTemplate
Это заполнитель раскрывающегося меню template7.
Шаблоны по умолчанию
Ниже приведены фрагменты кода шаблона по умолчанию для указанных выше параметров шаблонов.
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
<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
<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 Он определяет экземпляр панели автозаполнения. |
myAutocomplete.params
Определяет параметры инициализации, которые передаются вместе с объектом.
myAutocomplete.value
Он определяет массив с выбранными значениями.
myAutocomplete.opened
Он открывает автозаполнение, если установлено значение true.
myAutocomplete.dropdown
Он указывает экземпляр раскрывающегося списка автозаполнения.
myAutocomplete.popup
Он указывает экземпляр всплывающего окна автозаполнения.
myAutocomplete.page
Он указывает экземпляр страницы автозаполнения.
myAutocomplete.pageData
Он определяет автозаполнение данных страницы.
myAutocomplete.searchbar
Он определяет экземпляр панели автозаполнения.
Автозаполнение Свойства
В следующей таблице указаны методы автозаполнения, доступные в Framework7.
| S.No | Свойства и описание |
|---|---|
| 1 |
myAutocomplete.open () Он открывает автозаполнение, которое можно использовать в качестве раскрывающегося списка, всплывающего окна или страницы. |
| 2 |
myAutocomplete.close () Закрывает автозаполнение. |
| 3 |
myAutocomplete.showPreloader () Показывает предварительный загрузчик автозаполнения. |
| 4 |
myAutocomplete.hidePreloader () Он скрывает автозаполненный предварительный загрузчик. |
| 5 |
myAutocomplete.destroy () Это разрушает экземпляр автозаполнения preloader и удаляет все события. |
myAutocomplete.open ()
Он открывает автозаполнение, которое можно использовать в качестве раскрывающегося списка, всплывающего окна или страницы.
myAutocomplete.close ()
Закрывает автозаполнение.
myAutocomplete.showPreloader ()
Показывает предварительный загрузчик автозаполнения.
myAutocomplete.hidePreloader ()
Он скрывает автозаполненный предварительный загрузчик.
myAutocomplete.destroy ()
Это разрушает экземпляр автозаполнения preloader и удаляет все события.
пример
В следующем примере демонстрируется использование параметров автозаполнения, скрывающихся в 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>
Выход
Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код —
Сохраните приведенный выше HTML-код в виде файла autocomplete.html в корневой папке вашего сервера.
Откройте этот HTML-файл как http: //localhost/autocomplete.html, и вывод отобразится, как показано ниже.
Пример обеспечивает автозаполнение значений в простом раскрывающемся списке, раскрывающемся списке со всеми значениями, раскрывающемся списке с заполнителем, автономном автозаполнении и т. Д.