это задача и фронта и бэка
вот пример
https://jqueryui.com/autocomplete/#remote
конечный результат может быть вот таким (
demookay.com ) начните в поиск писать что то
вот код этого дела, конкретно на это сайте
$( ".fn_search" ).autocomplete( {
serviceUrl: 'ajax/search_products.php',
minChars: 1,
noCache: true,
onSelect: function(suggestion) {
$( "#fn_search" ).submit();
},
transformResult: function(result, query) {
var data = JSON.parse(result);
$(".fn_search").autocomplete('setOptions', {triggerSelectOnValidInput: data.suggestions.length == 1});
return data;
},
formatResult: function(suggestion, currentValue) {
var reEscape = new RegExp( '(\\' + ['/', '.', '*', '+', '?', '|', '(', ')', '[', ']', '{', '}', '\\'].join( '|\\' ) + ')', 'g' );
var pattern = '(' + currentValue.replace( reEscape, '\\$1' ) + ')';
return "<div>" + (suggestion.data.image ? "<img align=absmiddle src='" + suggestion.data.image + "'> " : '') + "</div>" + "<a href=" + suggestion.lang + "products/" + suggestion.data.url + '>' + suggestion.value.replace( new RegExp( pattern, 'gi' ), '<strong>$1<\/strong>' ) + '<\/a>' + "<span>" + suggestion.price + " " + suggestion.currency + "</span>";
}
} );
