Feature Request: Allow to display a custom image along each row

[inglesuniversal]

options can be...

image, svg, gif, etc

and allow to modify the way it is formatted by css

Thanks and #StaySafe

[folknor]

Using resultItem.content: (data, element) => { ... } and the other properties of resultItem you can make every row do whatever you want. The element argument is the html li element that is created in the autoComplete.js internals.

Look at https://tarekraafat.github.io/autoComplete.js/#/configuration?id=resultitem-optional

Here's the HTML generated by https://tarekraafat.github.io/autoComplete.js/demo/ for example

<ul id="autoComplete_list" class="autoComplete_list" role="listbox">
	<li id="undefined_0" class="autoComplete_result" role="option"
		style="display: flex; justify-content: space-between;">
		<span style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">
			<span class="autoComplete_highlighted">Beer</span> - True North Strong Ale
		</span>
		<span
			style="display: flex; align-items: center; font-size: 13px; font-weight: 100; text-transform: uppercase; color: rgba(0,0,0,.2);">
			food
		</span>
	</li>
	<li id="undefined_1" class="autoComplete_result" role="option"
		style="display: flex; justify-content: space-between;">
		<span style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">
			<span class="autoComplete_highlighted">Beer</span> - Paulaner Hefeweisse
		</span>
		<span
			style="display: flex; align-items: center; font-size: 13px; font-weight: 100; text-transform: uppercase; color: rgba(0,0,0,.2);">
			food
		</span>
	</li>
	<li id="undefined_2" class="autoComplete_result" role="option"
		style="display: flex; justify-content: space-between;">
		<span style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">
			<span class="autoComplete_highlighted">Beer</span> - Labatt Blue
		</span>
		<span
			style="display: flex; align-items: center; font-size: 13px; font-weight: 100; text-transform: uppercase; color: rgba(0,0,0,.2);">
			food
		</span>
	</li>
	<li id="undefined_3" class="autoComplete_result" role="option"
		style="display: flex; justify-content: space-between;">
		<span style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">
			<span class="autoComplete_highlighted">Beer</span> - Mill St Organic
		</span>
		<span
			style="display: flex; align-items: center; font-size: 13px; font-weight: 100; text-transform: uppercase; color: rgba(0,0,0,.2);">
			food
		</span>
	</li>
	<li id="undefined_4" class="autoComplete_result" role="option"
		style="display: flex; justify-content: space-between;">
		<span style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">
			<span class="autoComplete_highlighted">Beer</span> - Sleemans Honey Brown
		</span>
		<span
			style="display: flex; align-items: center; font-size: 13px; font-weight: 100; text-transform: uppercase; color: rgba(0,0,0,.2);">
			food
		</span>
	</li>
</ul>

style="display: flex; justify-content: space-between;" on the li is added in the custom code for that example, and everything inside (the two span elements) are added by using element.innerHTML.

[folknor]

Here's a screenshot where I add a custom item at the top with an image that provides some help text to the user.

[inglesuniversal]

I'll give it a try!!!! Thanks