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);