https://cat-tree-rufi.com/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    var $clearButton  = $searchWidget.find('i.clear');
7
8    $.widget('prestashop.psBlockSearchAutocomplete', $.ui.autocomplete, {
9        _renderItem: function (ul, product) {
10            var image = (product.cover) ? product.cover : prestashop.urls.no_picture_image;
11            var $img = $('<img class="autocomplete-thumbnail" src="'+image.bySize.small_default.url+'">');
12            return $("<li>")
13                .append($("<a>")
14                    .append($img)
15                    .append($("<span>").html(product.name).addClass("product"))
16                ).appendTo(ul)
17            ;
18        }
19    });
20
21    var isMobile = function() {
22        return $(window).width() < 768;
23    };
24    var autocompletePosition = function() {
25      return {
26        my: 'right top',
27        at: 'right bottom',
28        of: isMobile() ? '.header-top' : '#search_widget',
29      };
30    };
31
32    $searchBox.psBlockSearchAutocomplete({
33        position: autocompletePosition(),
34        source: function (query, response) {
35            $.post(searchURL, {
36                s: query.term,
37                resultsPerPage: 10
38            }, null, 'json')
39            .then(function (resp) {
40                response(resp.products);
41            })
42            .fail(response);
43        },
44        select: function (event, ui) {
45            var url = ui.item.url;
46            window.location.href = url;
47        },
48    }).psBlockSearchAutocomplete("widget").addClass('searchbar-autocomplete');
49
50    $(window).resize(function() {
51      $searchBox.psBlockSearchAutocomplete({
52        position: autocompletePosition(),
53      });
54      $searchBox.keyup();
55    });
56
57    $clearButton.click(function() {
58        $searchBox.val("");
59        $clearButton.hide();
60    });
61
62    $searchBox.keyup(function() {
63        $clearButton.toggle($searchBox.val() !== "" && isMobile());
64    });
65});