Autocomplete

    Framework7 comes with mobile-friendly and touch optimized Autocomplete component.

    Autocomplete could be used in standalone mode or as a dropdown.

    Autocomplete can be created and initialized only using JavaScript. We need to use related App’s method:

    app.autocomplete.create(parameters)- create Autocomplete instance

    • parameters - object. Object with autocomplete parameters

    Method returns created Autocomplete’s instance

    • el - HTMLElement or string (with CSS Selector) or object. Autocomplete instance to destroy.

    app.autocomplete.get(el)- get Autocomplete instance by HTML element

    • el - HTMLElement or string (with CSS Selector). Autocomplete element.

    Method returns Autocomplete’s instance

    app.autocomplete.open(el)- open Autocomplete

    • el - HTMLElement or string (with CSS Selector). Autocomplete element to open.

    Method returns Autocomplete’s instance

    app.autocomplete.close(el)- closes Autocomplete

    • el - HTMLElement or string (with CSS Selector). Autocomplete element to close.

    For example:

    Autocomplete Parameters

    Let’s look on list of all available parameters:

    Note that all following parameters can be used in global app parameters under autocomplete property to set defaults for all autcompletes. For example:

    1. var app = new Framework7({
    2.   autocomplete: {
    3.     openIn: 'popup',
    4.     animate: false,
    5.   }
    6. });

    After we initialize Autocomplete we have its initialized instance in variable (like autocomplete variable in example above) with helpful methods and properties:

    Autocomplete Events

    Autocomplete instance emits events on both self instance and app instance. App instance events has same names prefixed with autocomplete.

    Note that commented variables are not specified by default and their values is what they fallback to in this case.

    1. :root {
    2.   --f7-autocomplete-dropdown-bg-color: #fff;
    3.   --f7-autocomplete-dropdown-placeholder-color: #a9a9a9;
    4.   --f7-autocomplete-dropdown-preloader-size: 20px;
    5.   /*
    6.   --f7-autocomplete-dropdown-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.2);
    7.   */
    8. }
    9. .ios {
    10.   --f7-autocomplete-dropdown-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
    11.   --f7-autocomplete-dropdown-text-color: #000;
    12.   --f7-autocomplete-dropdown-text-matching-color: #000;
    13.   --f7-autocomplete-dropdown-text-matching-font-weight: 600;
    14.   --f7-autocomplete-dropdown-font-size: var(--f7-list-font-size);
    15. }
    16. .ios .theme-dark,
    17. .ios.theme-dark {
    18.   --f7-autocomplete-dropdown-bg-color: #1c1c1d;
    19.   --f7-autocomplete-dropdown-text-color: #fff;
    20.   --f7-autocomplete-dropdown-text-matching-color: #fff;
    21. }
    22. .md {
    23.   --f7-autocomplete-dropdown-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
    24.   --f7-autocomplete-dropdown-text-color: rgba(0, 0, 0, 0.54);
    25.   --f7-autocomplete-dropdown-text-matching-color: #212121;
    26.   --f7-autocomplete-dropdown-text-matching-font-weight: 400;
    27.   --f7-autocomplete-dropdown-font-size: var(--f7-list-font-size);
    28. }
    29. .md .theme-dark,
    30. .md.theme-dark {
    31.   --f7-autocomplete-dropdown-bg-color: #1c1c1d;
    32.   --f7-autocomplete-dropdown-text-color: rgba(255, 255, 255, 0.54);
    33.   --f7-autocomplete-dropdown-text-matching-color: rgba(255, 255, 255, 0.87);
    34. }
    35. .aurora {
    36.   --f7-autocomplete-dropdown-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
    37.   --f7-autocomplete-dropdown-text-color: #000;
    38.   --f7-autocomplete-dropdown-text-matching-color: #000;
    39.   --f7-autocomplete-dropdown-text-matching-font-weight: 700;
    40.   --f7-autocomplete-dropdown-font-size: 13px;
    41. }
    42. .aurora .theme-dark,
    43. .aurora.theme-dark {
    44.   --f7-autocomplete-dropdown-bg-color: #1c1c1c;
    45.   --f7-autocomplete-dropdown-text-color: #fff;
    46.   --f7-autocomplete-dropdown-text-matching-color: #fff;
    47. }

    Examples

    1. var app = new Framework7();
    3. var $$ = Dom7;
    5. // Fruits data demo array
    6. var fruits = ('Apple Apricot Avocado Banana Melon Orange Peach Pear Pineapple').split(' ');

    Simple Dropdown Autocomplete

    1. <div class="list no-hairlines-md">
    2.   <div class="block-header">Simple Dropdown Autocomplete</div>
    3.   <ul>
    4.     <li class="item-content item-input inline-label">
    5.       <div class="item-inner">
    6.         <div class="item-title item-label">Fruit</div>
    7.         <div class="item-input-wrap">
    8.           <input id="autocomplete-dropdown" type="text" placeholder="Fruit">
    9.         </div>
    10.       </div>
    11.     </li>
    12.   </ul>
    13. </div>
    1. var autocompleteDropdownSimple = app.autocomplete.create({
    2.   inputEl: '#autocomplete-dropdown',
    3.   openIn: 'dropdown',
    4.   source: function (query, render) {
    5.     var results = [];
    6.     if (query.length === 0) {
    7.       render(results);
    8.       return;
    9.     }
    10.     // Find matched items
    11.     for (var i = 0; i < fruits.length; i++) {
    12.       if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
    13.     }
    14.     // Render items by passing array with result items
    15.     render(results);
    16.   }
    17. });

    Dropdown With Input Expand

    1. <div class="list no-hairlines-md">
    2.   <div class="block-header">Dropdown With Input Expand</div>
    3.   <ul>
    4.     <li class="item-content item-input inline-label">
    5.       <div class="item-inner">
    6.         <div class="item-title item-label">Fruit</div>
    7.         <div class="item-input-wrap">
    8.           <input id="autocomplete-dropdown-expand" type="text" placeholder="Fruit">
    9.         </div>
    10.       </div>
    11.     </li>
    12.   </ul>
    13. </div>
    1. var autocompleteDropdownExpand = app.autocomplete.create({
    2.   inputEl: '#autocomplete-dropdown-expand',
    3.   openIn: 'dropdown',
    4.   expandInput: true, // expand input
    5.   source: function (query, render) {
    6.     var results = [];
    7.     if (query.length === 0) {
    8.       render(results);
    9.       return;
    10.     }
    11.     // Find matched items
    12.     for (var i = 0; i < fruits.length; i++) {
    13.       if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
    14.     }
    15.     // Render items by passing array with result items
    16.     render(results);
    17.   }
    18. });

    Dropdown With All Values

    1. var autocompleteDropdownAll = app.autocomplete.create({
    2.   inputEl: '#autocomplete-dropdown-all',
    3.   openIn: 'dropdown',
    4.   source: function (query, render) {
    5.     var results = [];
    6.     // Find matched items
    7.     for (var i = 0; i < fruits.length; i++) {
    8.       if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
    9.     }
    10.     // Render items by passing array with result items
    11.     render(results);
    12.   }
    13. });

    Dropdown With Placeholder

    1. <div class="list no-hairlines-md">
    2.   <div class="block-header">Dropdown With Placeholder</div>
    3.   <ul>
    4.     <li class="item-content item-input">
    5.       <div class="item-inner">
    6.         <div class="item-title item-label">Fruit</div>
    7.         <div class="item-input-wrap">
    8.         </div>
    9.       </div>
    10.     </li>
    11.   </ul>
    12. </div>
    1. var autocompleteDropdownPlaceholder = app.autocomplete.create({
    2.   inputEl: '#autocomplete-dropdown-placeholder',
    3.   openIn: 'dropdown',
    4.   dropdownPlaceholderText: 'Try to type "Apple"',
    5.   source: function (query, render) {
    6.     var results = [];
    7.     if (query.length === 0) {
    8.       render(results);
    9.       return;
    10.     }
    11.     // Find matched items
    12.     for (var i = 0; i < fruits.length; i++) {
    13.       if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
    14.     }
    15.     // Render items by passing array with result items
    16.     render(results);
    17.   }
    18. });

    Dropdown With Typeahead

    1. <div class="list no-hairlines-md">
    2.   <div class="block-header">Dropdown With Typeahead</div>
    3.   <ul>
    4.     <li class="item-content item-input">
    5.       <div class="item-inner">
    6.         <div class="item-title item-label">Fruit</div>
    7.         <div class="item-input-wrap">
    8.           <input id="autocomplete-dropdown-typeahead" type="text" placeholder="Fruit">
    9.         </div>
    10.       </div>
    11.     </li>
    12.   </ul>
    13. </div>
    1. var autocompleteDropdownTypeahead = app.autocomplete.create({
    2.   inputEl: '#autocomplete-dropdown-typeahead',
    3.   openIn: 'dropdown',
    4.   dropdownPlaceholderText: 'Try to type "Pineapple"',
    5.   typeahead: true,
    6.   source: function (query, render) {
    7.     var results = [];
    8.     if (query.length === 0) {
    9.       render(results);
    10.       return;
    11.     }
    12.     // Find matched items
    13.     for (var i = 0; i < fruits.length; i++) {
    14.       if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) === 0) results.push(fruits[i]);
    15.     }
    16.     // Render items by passing array with result items
    17.     render(results);
    18.   }
    19. });

    Dropdown With Ajax-Data

    1. <div class="list no-hairlines-md">
    2.   <div class="block-header">Dropdown With Ajax-Data</div>
    3.   <ul>
    4.     <li class="item-content item-input">
    5.       <div class="item-inner">
    6.         <div class="item-title item-label">Language</div>
    7.         <div class="item-input-wrap">
    8.           <input id="autocomplete-dropdown-ajax" type="text" placeholder="Language">
    9.         </div>
    10.       </div>
    11.     </li>
    12.   </ul>
    13. </div>
    1. var autocompleteDropdownAjax = app.autocomplete.create({
    2.   inputEl: '#autocomplete-dropdown-ajax',
    3.   openIn: 'dropdown',
    4.   preloader: true, //enable preloader
    5.   /* If we set valueProperty to "id" then input value on select will be set according to this property */
    6.   valueProperty: 'name', //object's "value" property name
    7.   textProperty: 'name', //object's "text" property name
    8.   limit: 20, //limit to 20 results
    9.   dropdownPlaceholderText: 'Try "JavaScript"',
    10.   source: function (query, render) {
    11.     var autocomplete = this;
    12.     var results = [];
    13.     if (query.length === 0) {
    14.       render(results);
    15.       return;
    16.     }
    17.     // Show Preloader
    18.     autocomplete.preloaderShow();
    20.     // Do Ajax request to Autocomplete data
    21.     app.request({
    22.       url: 'autocomplete-languages.json',
    23.       method: 'GET',
    24.       dataType: 'json',
    25.       //send "query" to server. Useful in case you generate response dynamically
    26.       data: {
    27.         query: query,
    28.       },
    29.       success: function (data) {
    30.         // Find matched items
    31.         for (var i = 0; i < data.length; i++) {
    32.           if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(data[i]);
    33.         }
    34.         // Hide Preoloader
    35.         autocomplete.preloaderHide();
    36.         // Render items by passing array with result items
    37.         render(results);
    38.       }
    39.     });
    40.   }
    41. });

    Dropdown With Ajax-Data + Typeahead

    1. <div class="list no-hairlines-md">
    2.   <div class="block-header">Dropdown With Ajax-Data + Typeahead</div>
    3.   <ul>
    4.     <li class="item-content item-input">
    5.       <div class="item-inner">
    6.         <div class="item-title item-label">Language</div>
    7.         <div class="item-input-wrap">
    8.           <input id="autocomplete-dropdown-ajax-typeahead" type="text" placeholder="Language">
    9.         </div>
    10.       </div>
    11.     </li>
    12.   </ul>
    13. </div>

    Searchbar Dropdown

    1. <div class="page">
    2.   <div class="navbar">
    3.     <div class="navbar-inner sliding">
    4.       ...
    5.       <!-- Put searchbar in subnavbar -->
    6.       <div class="subnavbar">
    7.         <form class="searchbar" id="searchbar-autocomplete">
    8.           <div class="searchbar-inner">
    9.             <div class="searchbar-input-wrap">
    10.               <input type="search" placeholder="Search">
    11.               <i class="searchbar-icon"></i>
    12.               <span class="input-clear-button"></span>
    13.             </div>
    14.             <span class="searchbar-disable-button">Cancel</span>
    15.           </div>
    16.         </form>
    17.       </div>
    18.     </div>
    19.   </div>
    20.   ...
    21. </div>
    1. var searchbar = app.searchbar.create({
    2.   el: '#searchbar-autocomplete',
    3.   customSearch: true,
    4.   on: {
    5.     search: function (query) {
    6.       console.log(query);
    7.     }
    8.   }
    9. });
    10. var autocompleteSearchbar = app.autocomplete.create({
    11.   openIn: 'dropdown',
    12.   inputEl: '#searchbar-autocomplete input[type="search"]',
    13.   dropdownPlaceholderText: 'Type "Apple"',
    14.   source: function (query, render) {
    15.     var results = [];
    16.     if (query.length === 0) {
    17.       render(results);
    18.       return;
    19.     }
    20.     // Find matched items
    21.     for (var i = 0; i < fruits.length; i++) {
    22.       if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
    23.     }
    24.     // Render items by passing array with result items
    25.     render(results);
    26.   }
    27. })

    Simple Standalone Autocomplete

    1. div class="list">
    3.     <li>
    4.       <a class="item-link item-content" href="#" id="autocomplete-standalone">
    5.         <input type="hidden">
    6.         <div class="item-inner">
    7.           <div class="item-title">Favorite Fruite</div>
    8.           <div class="item-after"></div>
    9.         </div>
    10.       </a>
    11.     </li>
    12.   </ul>
    13. </div>
    1. var autocompleteStandaloneSimple = app.autocomplete.create({
    2.   openIn: 'page', //open in page
    3.   openerEl: '#autocomplete-standalone', //link that opens autocomplete
    4.   closeOnSelect: true, //go back after we select something
    5.   source: function (query, render) {
    6.     var results = [];
    7.     if (query.length === 0) {
    8.       render(results);
    9.       return;
    10.     }
    11.     // Find matched items
    12.     for (var i = 0; i < fruits.length; i++) {
    13.       if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
    14.     }
    15.     // Render items by passing array with result items
    16.     render(results);
    17.   },
    18.   on: {
    19.     change: function (value) {
    20.       console.log(value);
    21.       // Add item text value to item-after
    22.       $$('#autocomplete-standalone').find('.item-after').text(value[0]);
    23.       // Add item value to input value
    24.       $$('#autocomplete-standalone').find('input').val(value[0]);
    25.     },
    26.   },
    27. });

    Popup Autocomplete

    1. <div class="list">
    2.   <div class="block-header">Popup Autocomplete</div>
    3.   <ul>
    4.     <li>
    5.       <a class="item-link item-content" href="#" id="autocomplete-standalone-popup">
    6.         <input type="hidden">
    7.         <div class="item-inner">
    8.           <div class="item-title">Favorite Fruite</div>
    9.           <div class="item-after"></div>
    10.         </div>
    11.       </a>
    12.     </li>
    13.   </ul>
    14. </div>
    1. var autocompleteStandalonePopup = app.autocomplete.create({
    2.   openIn: 'popup', //open in page
    3.   openerEl: '#autocomplete-standalone-popup', //link that opens autocomplete
    4.   closeOnSelect: true, //go back after we select something
    5.   source: function (query, render) {
    6.     var results = [];
    7.     if (query.length === 0) {
    8.       render(results);
    9.       return;
    10.     }
    11.     // Find matched items
    12.     for (var i = 0; i < fruits.length; i++) {
    13.       if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
    14.     }
    15.     // Render items by passing array with result items
    16.     render(results);
    17.   },
    18.   on: {
    19.     change: function (value) {
    20.       // Add item text value to item-after
    21.       $$('#autocomplete-standalone-popup').find('.item-after').text(value[0]);
    22.       // Add item value to input value
    23.       $$('#autocomplete-standalone-popup').find('input').val(value[0]);
    24.     },
    25.   },
    26. });

    Multiple Values

    1. <div class="list">
    2.   <div class="block-header">Multiple Values</div>
    3.   <ul>
    4.     <li>
    5.       <a class="item-link item-content" href="#" id="autocomplete-standalone-multiple">
    6.         <input type="hidden">
    7.         <div class="item-inner">
    8.           <div class="item-title">Favorite Fruite</div>
    9.           <div class="item-after"></div>
    10.         </div>
    11.       </a>
    12.     </li>
    13.   </ul>
    14. </div>
    1. var autocompleteStandaloneMultiple = app.autocomplete.create({
    2.   openIn: 'page', //open in page
    3.   openerEl: '#autocomplete-standalone-multiple', //link that opens autocomplete
    4.   multiple: true, //allow multiple values
    5.   source: function (query, render) {
    6.     var autocomplete = this;
    7.     var results = [];
    8.     if (query.length === 0) {
    9.       render(results);
    10.       return;
    11.     }
    12.     // Find matched items
    13.     for (var i = 0; i < fruits.length; i++) {
    14.       if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
    15.     }
    16.     // Render items by passing array with result items
    17.     render(results);
    18.   },
    19.   on: {
    20.     change: function (value) {
    21.       // Add item text value to item-after
    22.       $$('#autocomplete-standalone-multiple').find('.item-after').text(value.join(', '));
    23.       // Add item value to input value
    24.       $$('#autocomplete-standalone-multiple').find('input').val(value.join(', '));
    25.     }
    26.   }
    27. });

    Standalone With Ajax-Data

    1. var autocompleteStandaloneAjax = app.autocomplete.create({
    2.   openIn: 'page', //open in page
    3.   openerEl: '#autocomplete-standalone-ajax', //link that opens autocomplete
    4.   multiple: true, //allow multiple values
    5.   valueProperty: 'id', //object's "value" property name
    6.   textProperty: 'name', //object's "text" property name
    7.   limit: 50,
    8.   preloader: true, //enable preloader
    9.   source: function (query, render) {
    10.     var autocomplete = this;
    11.     var results = [];
    12.     if (query.length === 0) {
    13.       render(results);
    14.       return;
    15.     }
    16.     // Show Preloader
    17.     autocomplete.preloaderShow();
    18.     // Do Ajax request to Autocomplete data
    19.     app.request({
    20.       url: 'autocomplete-languages.json',
    21.       method: 'GET',
    22.       dataType: 'json',
    23.       //send "query" to server. Useful in case you generate response dynamically
    24.       data: {
    25.         query: query
    26.       },
    27.       success: function (data) {
    28.         // Find matched items
    29.         for (var i = 0; i < data.length; i++) {
    30.           if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(data[i]);
    31.         }
    32.         // Hide Preoloader
    33.         autocomplete.preloaderHide();
    34.         // Render items by passing array with result items
    35.         render(results);
    36.       }
    37.     });
    38.   },
    39.   on: {
    40.     change: function (value) {
    41.       var itemText = [],
    42.           inputValue = [];
    43.       for (var i = 0; i < value.length; i++) {
    44.         itemText.push(value[i].name);
    45.         inputValue.push(value[i].id);
    46.       }
    47.       // Add item text value to item-after
    48.       $$('#autocomplete-standalone-ajax').find('.item-after').text(itemText.join(', '));
    49.       // Add item value to input value
    50.       $$('#autocomplete-standalone-ajax').find('input').val(inputValue.join(', '));
    51.     },
    52. });