Simple Autocomplete
Huro is integrated with EasyAutocomplete, a nice jQuery automplete library. You can check the plugin documentation on Github. You can also access the javascript code by visiting the assets/js/components.js file. The following shows how it works with a simple result template.
//JS CODE
var demoSimpleOptions = {
url: "assets/data/user.json",
getValue: "name",
template: {
type: "custom",
method: function (value, item) {
return `
<div class="template-wrapper">
<div class="entry-text">
<span>${value}</span>
</div>
</div>
`
}
},
highlightPhrase: false,
list: {
maxNumberOfElements: 5,
showAnimation: {
type: "fade", //normal|slide|fade
time: 400,
callback: function () { }
},
match: {
enabled: true
},
onChooseEvent: function () {
//do your stuff here
}
},
};
$("#autocomplete-demo-simple").easyAutocomplete(demoSimpleOptions);
//MARKUP
<div class="field is-autocomplete">
<div class="control has-icon">
<input id="autocomplete-demo-simple" type="text" class="input" placeholder="Search people...">
<div class="form-icon">
<i data-feather="search"></i>
</div>
</div>
</div>
Subtext Autocomplete
Huro is integrated with EasyAutocomplete, a nice jQuery automplete library. You can check the plugin documentation on Github. You can also access the javascript code by visiting the assets/js/components.js file. The following shows how it works with a subtitle result template.
//JS CODE
var demoSubtextOptions = {
url: "assets/data/user.json",
getValue: "name",
template: {
type: "custom",
method: function (value, item) {
return `
<div class="template-wrapper">
<div class="entry-text">
<span>${value}</span>
<span>${item.location}</span>
</div>
</div>
`
}
},
highlightPhrase: false,
list: {
maxNumberOfElements: 5,
showAnimation: {
type: "fade", //normal|slide|fade
time: 400,
callback: function () { }
},
match: {
enabled: true
},
onChooseEvent: function () {
//do your stuff here
}
},
};
$("#autocomplete-demo-subtext").easyAutocomplete(demoSubtextOptions);
//MARKUP
<div class="field is-autocomplete">
<div class="control has-icon">
<input id="autocomplete-demo-subtext" type="text" class="input" placeholder="Search people...">
<div class="form-icon">
<i data-feather="search"></i>
</div>
</div>
</div>
Advanced Autocomplete
Huro is integrated with EasyAutocomplete, a nice jQuery automplete library. You can check the plugin documentation on Github. You can also access the javascript code by visiting the assets/js/components.js file. The following shows how it works with an advanced result template.
//JS CODE
var demoAdvancedOptions = {
url: "assets/data/user.json",
getValue: "name",
template: {
type: "custom",
method: function (value, item) {
return `
<div class="template-wrapper">
<div class="avatar-wrapper">
<img class="autocpl-avatar" src="${item.pic}">
<img class="avatar-badge" src="${item.badge}">
</div>
<div class="entry-text">
<span>${value}</span>
<span>${item.location}</span>
</div>
</div>
`
}
},
highlightPhrase: false,
list: {
maxNumberOfElements: 5,
showAnimation: {
type: "fade", //normal|slide|fade
time: 400,
callback: function () { }
},
match: {
enabled: true
},
onChooseEvent: function () {
//do your stuff here
}
},
};
$("#autocomplete-demo-advanced").easyAutocomplete(demoAdvancedOptions);
//MARKUP
<div class="field is-autocomplete">
<div class="control has-icon">
<input id="autocomplete-demo-advanced" type="text" class="input" placeholder="Search people...">
<div class="form-icon">
<i data-feather="search"></i>
</div>
</div>
</div>