Autocomplete

Examples

var app = new Framework7();

var $$ = Dom7;

// Fruits data demo array
var fruits = ('Apple Apricot Avocado Banana Melon Orange Peach Pear Pineapple').split(' ');

Simple Dropdown Autocomplete

<div class="list no-hairlines-md">
  <div class="block-header">Simple Dropdown Autocomplete</div>
  <ul>
    <li class="item-content item-input inline-label">
      <div class="item-inner">
        <div class="item-title item-label">Fruit</div>
        <div class="item-input-wrap">
          <input id="autocomplete-dropdown" type="text" placeholder="Fruit">
        </div>
      </div>
    </li>
  </ul>
</div>

var autocompleteDropdownSimple = app.autocomplete.create({
  inputEl: '#autocomplete-dropdown',
  openIn: 'dropdown',
  source: function (query, render) {
    var results = [];
    if (query.length === 0) {
      render(results);
      return;
    }
    // Find matched items
    for (var i = 0; i < fruits.length; i++) {
      if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
    }
    // Render items by passing array with result items
    render(results);
  }
});

Dropdown With Input Expand

<div class="list no-hairlines-md">
  <div class="block-header">Dropdown With Input Expand</div>
  <ul>
    <li class="item-content item-input inline-label">
      <div class="item-inner">
        <div class="item-title item-label">Fruit</div>
        <div class="item-input-wrap">
          <input id="autocomplete-dropdown-expand" type="text" placeholder="Fruit">
        </div>
      </div>
    </li>
  </ul>
</div>

var autocompleteDropdownExpand = app.autocomplete.create({
  inputEl: '#autocomplete-dropdown-expand',
  openIn: 'dropdown',
  expandInput: true, // expand input
  source: function (query, render) {
    var results = [];
    if (query.length === 0) {
      render(results);
      return;
    }
    // Find matched items
    for (var i = 0; i < fruits.length; i++) {
      if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
    }
    // Render items by passing array with result items
    render(results);
  }
});

Dropdown With All Values

<div class="list no-hairlines-md">
  <div class="block-header">Dropdown With All Values</div>
  <ul>
    <li class="item-content item-input">
      <div class="item-inner">
        <div class="item-title item-label">Fruit</div>
        <div class="item-input-wrap">
          <input id="autocomplete-dropdown-all" type="text" placeholder="Fruit">
        </div>
      </div>
    </li>
  </ul>
</div>

var autocompleteDropdownAll = app.autocomplete.create({
  inputEl: '#autocomplete-dropdown-all',
  openIn: 'dropdown',
  source: function (query, render) {
    var results = [];
    // Find matched items
    for (var i = 0; i < fruits.length; i++) {
      if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
    }
    // Render items by passing array with result items
    render(results);
  }
});

Dropdown With Placeholder

<div class="list no-hairlines-md">
  <div class="block-header">Dropdown With Placeholder</div>
  <ul>
    <li class="item-content item-input">
      <div class="item-inner">
        <div class="item-title item-label">Fruit</div>
        <div class="item-input-wrap">
          <input id="autocomplete-dropdown-placeholder" type="text" placeholder="Fruit">
        </div>
      </div>
    </li>
  </ul>
</div>

var autocompleteDropdownPlaceholder = app.autocomplete.create({
  inputEl: '#autocomplete-dropdown-placeholder',
  openIn: 'dropdown',
  dropdownPlaceholderText: 'Try to type "Apple"',
  source: function (query, render) {
    var results = [];
    if (query.length === 0) {
      render(results);
      return;
    }
    // Find matched items
    for (var i = 0; i < fruits.length; i++) {
      if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
    }
    // Render items by passing array with result items
    render(results);
  }
});

Dropdown With Typeahead

<div class="list no-hairlines-md">
  <div class="block-header">Dropdown With Typeahead</div>
  <ul>
    <li class="item-content item-input">
      <div class="item-inner">
        <div class="item-title item-label">Fruit</div>
        <div class="item-input-wrap">
          <input id="autocomplete-dropdown-typeahead" type="text" placeholder="Fruit">
        </div>
      </div>
    </li>
  </ul>
</div>

var autocompleteDropdownTypeahead = app.autocomplete.create({
  inputEl: '#autocomplete-dropdown-typeahead',
  openIn: 'dropdown',
  dropdownPlaceholderText: 'Try to type "Pineapple"',
  typeahead: true,
  source: function (query, render) {
    var results = [];
    if (query.length === 0) {
      render(results);
      return;
    }
    // Find matched items
    for (var i = 0; i < fruits.length; i++) {
      if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) === 0) results.push(fruits[i]);
    }
    // Render items by passing array with result items
    render(results);
  }
});

Dropdown With Ajax-Data

<div class="list no-hairlines-md">
  <div class="block-header">Dropdown With Ajax-Data</div>
  <ul>
    <li class="item-content item-input">
      <div class="item-inner">
        <div class="item-title item-label">Language</div>
        <div class="item-input-wrap">
          <input id="autocomplete-dropdown-ajax" type="text" placeholder="Language">
        </div>
      </div>
    </li>
  </ul>
</div>

var autocompleteDropdownAjax = app.autocomplete.create({
  inputEl: '#autocomplete-dropdown-ajax',
  openIn: 'dropdown',
  preloader: true, //enable preloader
  /* If we set valueProperty to "id" then input value on select will be set according to this property */
  valueProperty: 'name', //object's "value" property name
  textProperty: 'name', //object's "text" property name
  limit: 20, //limit to 20 results
  dropdownPlaceholderText: 'Try "JavaScript"',
  source: function (query, render) {
    var autocomplete = this;
    var results = [];
    if (query.length === 0) {
      render(results);
      return;
    }
    // Show Preloader
    autocomplete.preloaderShow();

    // Do Ajax request to Autocomplete data
    app.request({
      url: 'autocomplete-languages.json',
      method: 'GET',
      dataType: 'json',
      //send "query" to server. Useful in case you generate response dynamically
      data: {
        query: query,
      },
      success: function (data) {
        // Find matched items
        for (var i = 0; i < data.length; i++) {
          if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(data[i]);
        }
        // Hide Preoloader
        autocomplete.preloaderHide();
        // Render items by passing array with result items
        render(results);
      }
    });
  }
});

Dropdown With Ajax-Data + Typeahead

<div class="list no-hairlines-md">
  <div class="block-header">Dropdown With Ajax-Data + Typeahead</div>
  <ul>
    <li class="item-content item-input">
      <div class="item-inner">
        <div class="item-title item-label">Language</div>
        <div class="item-input-wrap">
          <input id="autocomplete-dropdown-ajax-typeahead" type="text" placeholder="Language">
        </div>
      </div>
    </li>
  </ul>
</div>

var autocompleteDropdownAjaxTypeahead = app.autocomplete.create({
  inputEl: '#autocomplete-dropdown-ajax-typeahead',
  openIn: 'dropdown',
  preloader: true, //enable preloader
  /* If we set valueProperty to "id" then input value on select will be set according to this property */
  valueProperty: 'name', //object's "value" property name
  textProperty: 'name', //object's "text" property name
  limit: 20, //limit to 20 results
  typeahead: true,
  dropdownPlaceholderText: 'Try "JavaScript"',
  source: function (query, render) {
    var autocomplete = this;
    var results = [];
    if (query.length === 0) {
      render(results);
      return;
    }
    // Show Preloader
    autocomplete.preloaderShow();

    // Do Ajax request to Autocomplete data
    app.request({
      url: 'autocomplete-languages.json',
      method: 'GET',
      dataType: 'json',
      //send "query" to server. Useful in case you generate response dynamically
      data: {
        query: query,
      },
      success: function (data) {
        // Find matched items
        for (var i = 0; i < data.length; i++) {
          if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) === 0) results.push(data[i]);
        }
        // Hide Preoloader
        autocomplete.preloaderHide();
        // Render items by passing array with result items
        render(results);
      }
    });
  }
});

Searchbar Dropdown

<div class="page">
  <div class="navbar">
    <div class="navbar-inner sliding">
      ...
      <!-- Put searchbar in subnavbar -->
      <div class="subnavbar">
        <form class="searchbar" id="searchbar-autocomplete">
          <div class="searchbar-inner">
            <div class="searchbar-input-wrap">
              <input type="search" placeholder="Search">
              <i class="searchbar-icon"></i>
              <span class="input-clear-button"></span>
            </div>
            <span class="searchbar-disable-button">Cancel</span>
          </div>
        </form>
      </div>
    </div>
  </div>
  ...
</div>

var searchbar = app.searchbar.create({
  el: '#searchbar-autocomplete',
  customSearch: true,
  on: {
    search: function (query) {
      console.log(query);
    }
  }
});
var autocompleteSearchbar = app.autocomplete.create({
  openIn: 'dropdown',
  inputEl: '#searchbar-autocomplete input[type="search"]',
  dropdownPlaceholderText: 'Type "Apple"',
  source: function (query, render) {
    var results = [];
    if (query.length === 0) {
      render(results);
      return;
    }
    // Find matched items
    for (var i = 0; i < fruits.length; i++) {
      if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
    }
    // Render items by passing array with result items
    render(results);
  }
})

Simple Standalone Autocomplete

div class="list">
  <div class="block-header">Simple Standalone Autocomplete</div>
  <ul>
    <li>
      <a class="item-link item-content" href="#" id="autocomplete-standalone">
        <input type="hidden">
        <div class="item-inner">
          <div class="item-title">Favorite Fruite</div>
          <div class="item-after"></div>
        </div>
      </a>
    </li>
  </ul>
</div>

var autocompleteStandaloneSimple = app.autocomplete.create({
  openIn: 'page', //open in page
  openerEl: '#autocomplete-standalone', //link that opens autocomplete
  closeOnSelect: true, //go back after we select something
  source: function (query, render) {
    var results = [];
    if (query.length === 0) {
      render(results);
      return;
    }
    // Find matched items
    for (var i = 0; i < fruits.length; i++) {
      if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
    }
    // Render items by passing array with result items
    render(results);
  },
  on: {
    change: function (value) {
      console.log(value);
      // Add item text value to item-after
      $$('#autocomplete-standalone').find('.item-after').text(value[0]);
      // Add item value to input value
      $$('#autocomplete-standalone').find('input').val(value[0]);
    },
  },
});

Popup Autocomplete

<div class="list">
  <div class="block-header">Popup Autocomplete</div>
  <ul>
    <li>
      <a class="item-link item-content" href="#" id="autocomplete-standalone-popup">
        <input type="hidden">
        <div class="item-inner">
          <div class="item-title">Favorite Fruite</div>
          <div class="item-after"></div>
        </div>
      </a>
    </li>
  </ul>
</div>

var autocompleteStandalonePopup = app.autocomplete.create({
  openIn: 'popup', //open in page
  openerEl: '#autocomplete-standalone-popup', //link that opens autocomplete
  closeOnSelect: true, //go back after we select something
  source: function (query, render) {
    var results = [];
    if (query.length === 0) {
      render(results);
      return;
    }
    // Find matched items
    for (var i = 0; i < fruits.length; i++) {
      if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
    }
    // Render items by passing array with result items
    render(results);
  },
  on: {
    change: function (value) {
      // Add item text value to item-after
      $$('#autocomplete-standalone-popup').find('.item-after').text(value[0]);
      // Add item value to input value
      $$('#autocomplete-standalone-popup').find('input').val(value[0]);
    },
  },
});

Multiple Values

<div class="list">
  <div class="block-header">Multiple Values</div>
  <ul>
    <li>
      <a class="item-link item-content" href="#" id="autocomplete-standalone-multiple">
        <input type="hidden">
        <div class="item-inner">
          <div class="item-title">Favorite Fruite</div>
          <div class="item-after"></div>
        </div>
      </a>
    </li>
  </ul>
</div>

var autocompleteStandaloneMultiple = app.autocomplete.create({
  openIn: 'page', //open in page
  openerEl: '#autocomplete-standalone-multiple', //link that opens autocomplete
  multiple: true, //allow multiple values
  source: function (query, render) {
    var autocomplete = this;
    var results = [];
    if (query.length === 0) {
      render(results);
      return;
    }
    // Find matched items
    for (var i = 0; i < fruits.length; i++) {
      if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
    }
    // Render items by passing array with result items
    render(results);
  },
  on: {
    change: function (value) {
      // Add item text value to item-after
      $$('#autocomplete-standalone-multiple').find('.item-after').text(value.join(', '));
      // Add item value to input value
      $$('#autocomplete-standalone-multiple').find('input').val(value.join(', '));
    }
  }
});

Standalone With Ajax-Data

<div class="list">
  <div class="block-header">With Ajax-Data</div>
  <ul>
    <li>
      <a class="item-link item-content" href="#" id="autocomplete-standalone-ajax">
        <input type="hidden">
        <div class="item-inner">
          <div class="item-title">Language</div>
          <div class="item-after"></div>
        </div>
      </a>
    </li>
  </ul>
</div>

var autocompleteStandaloneAjax = app.autocomplete.create({
  openIn: 'page', //open in page
  openerEl: '#autocomplete-standalone-ajax', //link that opens autocomplete
  multiple: true, //allow multiple values
  valueProperty: 'id', //object's "value" property name
  textProperty: 'name', //object's "text" property name
  limit: 50,
  preloader: true, //enable preloader
  source: function (query, render) {
    var autocomplete = this;
    var results = [];
    if (query.length === 0) {
      render(results);
      return;
    }
    // Show Preloader
    autocomplete.preloaderShow();
    // Do Ajax request to Autocomplete data
    app.request({
      url: 'autocomplete-languages.json',
      method: 'GET',
      dataType: 'json',
      //send "query" to server. Useful in case you generate response dynamically
      data: {
        query: query
      },
      success: function (data) {
        // Find matched items
        for (var i = 0; i < data.length; i++) {
          if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(data[i]);
        }
        // Hide Preoloader
        autocomplete.preloaderHide();
        // Render items by passing array with result items
        render(results);
      }
    });
  },
  on: {
    change: function (value) {
      var itemText = [],
          inputValue = [];
      for (var i = 0; i < value.length; i++) {
        itemText.push(value[i].name);
        inputValue.push(value[i].id);
      }
      // Add item text value to item-after
      $$('#autocomplete-standalone-ajax').find('.item-after').text(itemText.join(', '));
      // Add item value to input value
      $$('#autocomplete-standalone-ajax').find('input').val(inputValue.join(', '));
    },
  },
});