Open pdt256 opened 7 years ago
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/
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: