kommerce-core icon indicating copy to clipboard operation
kommerce-core copied to clipboard

Add typeahead style helper for uuid input

Open pdt256 opened this issue 8 years ago • 4 comments

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:

image

pdt256 avatar Jan 13 '17 19:01 pdt256

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>

pdt256 avatar Jan 13 '17 19:01 pdt256

It would be great if we could leverage existing twig templates for this.

pdt256 avatar Jan 13 '17 19:01 pdt256

This is an opportunity to extend the base template (cardinal or bootstrap) to add the typeahead feature in multiple framework implementations.

pdt256 avatar Jan 13 '17 19:01 pdt256

This is an option: https://mrabbani.github.io/examples/vue_typeahead/

pdt256 avatar Mar 24 '17 00:03 pdt256