https://amatix.es/modules/ps_searchbar/ps_searchbar.js

1/* global $ */
2$(document).ready(function () {
3    var $searchWidget = $('#search_widget');
4    var $searchBox    = $searchWidget.find('input[type=text]');
5    var searchURL     = $searchWidget.attr('data-search-controller-url');
6
7    $.widget('prestashop.psBlockSearchAutocomplete', $.ui.autocomplete, {
8        _renderItem: function (ul, product) {
9            return $("<li>")
10                .append($("<a>")
11                    .append($("<span>").html(product.category_name).addClass("category"))
12                    .append($("<span>").html(' > ').addClass("separator"))
13                    .append($("<span>").html(product.name).addClass("product"))
14                ).appendTo(ul)
15            ;
16        }
17    });
18
19    $searchBox.psBlockSearchAutocomplete({
20        source: function (query, response) {
21            $.post(searchURL, {
22                s: query.term,
23                resultsPerPage: 10
24            }, null, 'json')
25            .then(function (resp) {
26                response(resp.products);
27            })
28            .fail(response);
29        },
30        select: function (event, ui) {
31            var url = ui.item.url;
32            window.location.href = url;
33        },
34    });
35});