AutoComplete

This is just an example showing AutocComplete implementation for Page Hopper. Check it out by pressing ctrl + k (cmd + k for Macs).

For detailed config & usage instructions please visit our AutoComplete repository.

Text input

<input class='js-autocomplete-page-hopper input--page-hopper' type='text'>"

Config

var config = {
  el: ".js-autocomplete-page-hopper",
  threshold: 2,
  limit: 4,
  templates: {
    item: "<div class='copy--feature'>{{title}}</div>",
    value: "{{slug}}",
    empty: "<div class='copy--feature'>No matches found</div>"
  },
  extraClasses: {
    wrapper: "page-hopper"
  },
  fetch: function(searchTerm, callback) {
    var regex = new RegExp(searchTerm, "gim"),
        results = window.lp.pageHopper.sections.filter(function(current) {
          return regex.test(current.title);
        });
        
    callback(results);
  },
  onItem: function(item) {
    location.href = $(item).data("value");
  }
};

Initialization

new AutoComplete(config);