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:

    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 instance emits events on both self instance and app instance. App instance events has same names prefixed with autocomplete.

    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. <div class="list no-hairlines-md">
    2.   <div class="block-header">Dropdown With All Values</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-all" type="text" placeholder="Fruit">
    9.         </div>
    10.       </div>
    11.     </li>
    12.   </ul>
    13. </div>

    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.           <input id="autocomplete-dropdown-placeholder" type="text" placeholder="Fruit">
    9.         </div>
    10.       </div>
    11.     </li>
    12.   </ul>
    13. </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">
    3.     <li class="item-content item-input">
    4.       <div class="item-inner">
    5.         <div class="item-title item-label">Fruit</div>
    6.         <div class="item-input-wrap">
    7.           <input id="autocomplete-dropdown-typeahead" type="text" placeholder="Fruit">
    8.         </div>
    9.       </div>
    10.     </li>
    11.   </ul>
    12. </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>
    1. var autocompleteDropdownAjaxTypeahead = app.autocomplete.create({
    2.   inputEl: '#autocomplete-dropdown-ajax-typeahead',
    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.   typeahead: true,
    10.   dropdownPlaceholderText: 'Try "JavaScript"',
    11.   source: function (query, render) {
    12.     var autocomplete = this;
    13.     var results = [];
    14.     if (query.length === 0) {
    15.       render(results);
    16.       return;
    17.     }
    18.     // Show Preloader
    19.     autocomplete.preloaderShow();
    21.     // Do Ajax request to Autocomplete data
    22.     app.request({
    23.       url: 'autocomplete-languages.json',
    24.       method: 'GET',
    25.       dataType: 'json',
    26.       //send "query" to server. Useful in case you generate response dynamically
    27.       data: {
    28.         query: query,
    29.       },
    30.       success: function (data) {
    31.         // Find matched items
    32.         for (var i = 0; i < data.length; i++) {
    33.           if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) === 0) results.push(data[i]);
    34.         }
    35.         // Hide Preoloader
    36.         autocomplete.preloaderHide();
    37.         // Render items by passing array with result items
    38.         render(results);
    39.       }
    40.     });
    41.   }
    42. });

    Searchbar Dropdown

    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.   dropdownPlaceholderText: 'Type "Apple"',
    13.   source: function (query, render) {
    14.     var results = [];
    15.     if (query.length === 0) {
    16.       render(results);
    17.       return;
    18.     }
    19.     // Find matched items
    20.     for (var i = 0; i < fruits.length; i++) {
    21.       if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
    22.     }
    23.     // Render items by passing array with result items
    24.     render(results);
    25.   }
    26. })

    Simple Standalone Autocomplete

    1. div class="list">
    2.   <div class="block-header">Simple Standalone Autocomplete</div>
    3.   <ul>
    4.     <li>
    5.       <a class="item-link item-content" href="#" id="autocomplete-standalone">
    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 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. <div class="list">
    2.   <div class="block-header">With Ajax-Data</div>
    3.   <ul>
    4.     <li>
    5.       <a class="item-link item-content" href="#" id="autocomplete-standalone-ajax">
    6.         <input type="hidden">
    7.         <div class="item-inner">
    8.           <div class="item-title">Language</div>
    9.           <div class="item-after"></div>
    10.         </div>
    11.       </a>
    12.     </li>