Учебники

Framework7 – автозаполнение

Автозаполнение – это удобный для мобильных устройств и оптимизированный для сенсорных устройств компонент 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, и вывод отобразится, как показано ниже.

Пример обеспечивает автозаполнение значений в простом раскрывающемся списке, раскрывающемся списке со всеми значениями, раскрывающемся списке с заполнителем, автономном автозаполнении и т. Д.