Framework7 – Autocomplete


Framework7 – Autocomplete


”;


Description

Autocomplete is a Framework7”s mobile friendly and touch optimized component, which can be as dropdown or in standalone way. You can create and initialize Autocomplete instance by using the JavaScript method −

myApp.autocomplete(parameters)

Where parameters are required objects used to initialize the Autocomplete instance.

Autocomplete Parameters

The following table lists the available Autocomplete parameters in Framework7 −

S.No Parameters & Description Type Default
1

openIn

It defines how to open an Autocomplete which could be used as dropdown, popup or page.

string page
2

source

It uses autocomplete instance, search query and renders function to pass matched items with array.

function (autocomplete, query, render)
3

valueProperty

It specifies the item value of matched item object”s key.

string id
4

limit

It displays the limited number of items in autocomplete per query.

number
5

preloader

Preloader can be used to specify autocomplete layout by setting it to true.

boolean false
6

preloaderColor

It specifies the preloader color. By default, the color is “black”.

string
7

value

Defines the array with default selected values.

array
8

textProperty

It specifies the item value of matched item object”s key, which can be used as a title of displayed options.

string text

Standalone Autocomplete Parameters

The following table lists the available Standalone Autocomplete parameters in Framework7 −

S.No Parameters & Description Type Default
1

opener

It is string or HTML element parameter, which will open the standalone autocomplete page.

string or HTMLElement
2

popupCloseText

It is used to close the autocomplete popup.

string ”Close”
3

backText

It provides the back link when autocomplete is opened as page.

string ”Back”
4

pageTitle

It specifies the autocomplete page title.

string
5

searchbarPlaceholderText

It specifies the search bar placeholder text.

string ”Search”
6

searchbarCancelText

It defines the search bar cancel button text.

string ”cancel”
7

notFoundText

It displays the text when there is no matched element found.

string ”Nothing found”
8

multiple

It allows to select multiple selection by setting it to true.

boolean false
9

navbarTheme

It specifies the color theme for navbar.

string
10

backOnSelect

When the user picks value, the autocomplete will be closed by setting it to true.

boolean false
11

formTheme

It specifies the color theme for form.

string

Dropdown Autocomplete Parameters

The following table lists the available Dropdown Autocomplete parameters in Framework7 −

S.No Parameters & Description Type Default
1

input

It is string or HTML element used for text input.

string or HTMLElement
2

dropdownPlaceholderText

It specifies the dropdown placeholder text.

string
3

updateInputValueOnSelect

You can update the input value on select by setting it to true.

boolean true
4

expandInput

You can expand the text input in List View to make full screen wide during dropdown visible by setting item-input it to true.

boolean false

Autocomplete Callbacks Functions

The below table lists available Dropdown Autocomplete parameters in Framework7 −

S.No Parameters & Description Type Default
1

onChange

Whenever the autocomplete value is changed, this callback function will be executed.

function (autocomplete, value)
2

onOpen

Whenever autocomplete is opened, this callback function will be executed.

function (autocomplete)
3

onClose

Whenever autocomplete is closed, this callback function will be executed.

function (autocomplete)

Autocomplete Templates

The following table lists the available Dropdown Autocomplete parameters in Framework7 −

S.No Parameters & Description Type Default
1

navbarTemplate

It is standalone autocomplete navbar template.

string
2

itemTemplate

It is standalone template7 form item.

string
3

dropdownTemplate

It is template7 dropdown template.

string
4

dropdownItemTemplate

It is template7 dropdown list item.

string
5

dropdownPlaceholderTemplate

It is template7 dropdown placeholder item.

string

Default templates

Following are the default template code snippets for the above defined templates parameters −

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>

Autocomplete Methods

The following table specifies Autocomplete methods available in Framework7 −

S.No Methods & Description
1

myAutocomplete.params

Defines the initialization parameters that are passes with object.

2

myAutocomplete.value

It defines the array with selected values.

3

myAutocomplete.opened

It opens the Autocomplete if it is set to true.

4

myAutocomplete.dropdown

It specifies an instance of Autocomplete dropdown.

5

myAutocomplete.popup

It specifies an instance of Autocomplete popup.

6

myAutocomplete.page

It specifies an instance of Autocomplete page.

7

myAutocomplete.pageData

It defines Autocomplete page data.

8

myAutocomplete.searchbar

It defines Autocomplete searchbar instance.

Autocomplete Properties

The following table specifies Autocomplete methods available in Framework7 −

S.No Properties & Description
1

myAutocomplete.open()

It opens the Autocomplete, which could be used as dropdown, popup or page.

2

myAutocomplete.close()

It closes the Autocomplete.

3

myAutocomplete.showPreloader()

It shows the Autocomplete preloader.

4

myAutocomplete.hidePreloader()

It hides the Autocomplete preloader.

5

myAutocomplete.destroy()

It ruins the Autocomplete preloader instance and removes all events.

Example

The following example demonstrates the use of autocomplete parameters hiding in the 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

Let us carry out the following steps to see how the above given code works −

  • Save the above given HTML code as autocomplete.html file in your server root folder.

  • Open this HTML file as http://localhost/autocomplete.html and the output is displayed as shown below.

  • The example provides autocomplete of values in simple dropdown, dropdown with all values, dropdown with placeholder, standalone autocomplete etc.