After converting the object "suggestion" to a string, I have data stored in the "sugestion" variable like this:
{"value":"<img src=\"http://localhost/erp/assets/images/product/123.jpg\"> 123123123 t-shirt","data":"ABC098765"}
Unfortunately, the
<img src="\"http://localhost/erp/assets/images/product/123.jpg\">This is the output display:
html += '<div class="' + className + '" data-index="' + i + '">' + formatResult(suggestion, value, i) + '</div>';
The complete script looks like this:
$.each(that.suggestions, function (i, suggestion) {
if (groupBy){
html += formatGroup(suggestion, value, i);
}
html += '<div class="' + className + '" data-index="' + i + '">' + formatResult(suggestion, value, i) + '</div>';
});
This is how the formatting of the result is handled:
Autocomplete.formatResult = function (suggestion, currentValue) {
// Do not replace anything if the current value is empty
if (!currentValue) {
return suggestion.value;
}
var pattern = '(' + utils.escapeRegExChars(currentValue) + ')';
return suggestion.value
.replace(new RegExp(pattern, 'gi'), '<strong>$1<\/strong>')
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/<(\/?strong)>/g, '<$1>');
};
If you want the image tag to display as an actual image in the output, you would need to adjust the code accordingly.
Thank you!