kommerce-core
kommerce-core copied to clipboard
Add typeahead style helper for uuid input
When there is an input field for a productId, there should be a typeahead helper to make finding and selecting a product easier. This can also apply to any other entity in the system when entering a uuid.
Example:
The above example uses typeahead and bloodhound:
<script type="text/javascript">
$(function() {
var products = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: "/admin/product/api/%QUERY?product_ts=1484335230",
limit: 10
})
products.initialize();
$('.typeahead').typeahead({
minLength: 2,
highlight: true,
}, {
displayKey: 'value',
source: products.ttAdapter(),
templates: {
suggestion: Handlebars.compile([
'<div class="row">',
'<div class="col-sm-2">',
'{{#if defaultImageUrl}}',
'<a href="{{adminUrl}}">',
'<img src="{{defaultImageUrl}}" style="height: 40px" />',
'</a>',
'{{/if}}',
'</div>',
'<div class="col-sm-10">',
'<a href="{{adminUrl}}">',
'<p>{{name}} - <small class="text-muted">{{sku}}</small></p>',
'</a>',
'<p>{{description}}</p>',
'</div>',
'</div>'
].join(' '))
}
});
});
</script>
It would be great if we could leverage existing twig templates for this.
This is an opportunity to extend the base template (cardinal or bootstrap) to add the typeahead feature in multiple framework implementations.
This is an option: https://mrabbani.github.io/examples/vue_typeahead/