https://enjoyfurs.ru/assets/compo/js/widgets/productsSearch.js

1(function ($) {
2    'use strict';
3
4    /* редизайн поисковых подсказок (текущие стили сайта) */
5    if (!document.getElementById('search-suggest-style')) {
6        $('<style id="search-suggest-style">'
7            /* типографика сайта: Helvetica Neue/Arial */
8            + 'ul.search.ui-autocomplete{font-family:\'Helvetica Neue\',Helvetica,Arial,sans-serif;}'
9            /* вертикальные миниатюры 3:4, как фото товаров, без растяжения */
10            + 'ul.search.ui-autocomplete img{width:96px;height:128px;min-width:96px;max-width:96px;object-fit:cover;border-radius:4px;background:#f8f8f8;}'
11            + 'ul.search.ui-autocomplete .wrap{padding-left:12px;}'
12            /* название: крупнее, нейтральный тёмный, без синевы и подчёркивания */
13            + 'ul.search.ui-autocomplete .search-item a{color:#333;text-decoration:none;}'
14            + 'ul.search.ui-autocomplete .search-item .title{font-size:14px;color:#333;text-decoration:none;padding-bottom:0;display:inline;}'
15            /* цена: меньше названия, приглушённая */
16            + 'ul.search.ui-autocomplete .search-item .price{font-size:12px;color:#777;margin-left:8px;display:inline;font-family:inherit;}'
17            /* строка "Показать все" отделена, по центру, без синевы */
18            + 'ul.search.ui-autocomplete li.search-all{border-top:1px solid #e5e5e5;margin-top:8px;padding-top:7px;}'
19            + 'ul.search.ui-autocomplete .search-all a{color:#333;text-decoration:none;}'
20            + 'ul.search.ui-autocomplete .search-all .title{display:block;text-align:center;font-size:13px;color:#333;text-decoration:none;font-weight:500;padding-bottom:0;}'
21            /* без голубой подсветки строки при наведении (перебиваем jquery-ui) */
22            + 'ul.search.ui-autocomplete li.ui-state-focus,ul.search.ui-autocomplete a.ui-state-focus{background:transparent!important;background-image:none!important;border-color:transparent!important;box-shadow:none!important;font-weight:400!important;}'
23            /* мобильный: дропдаун почти во весь экран (старый код делал ширину = ширина инпута + 25px — слишком узко) */
24            + '@media (max-width:767px){ul.search.ui-autocomplete{width:calc(100vw - 24px)!important;left:12px!important;}}'
25            + '</style>').appendTo('head');
26    }
27
28    $.widget("compo.productsSearch", {
29
30        _create: function () {
31            var self = this;
32            var search = this.element;
33
34
35            var cache = {};
36
37            search.autocomplete({
38                minLength: 2,
39
40                source: function (request, response) {
41                    var term = request.term.trim();
42
43                    if (term in cache) {
44                        response(cache[term]);
45                        return;
46                    }
47
48                    request = {'keyword': term, 'simple': 1};
49
50
51                    $.getJSON(
52                        "/search/",
53                        request,
54                        function (data) {
55                            cache[term] = data;
56                            response(data);
57                        }
58                    );
59                },
60                focus: function () {
61                    return false;
62                },
63                select: function (event, ui) {
64                    if (ui.item.all != 1) {
65                        window.location.href = '/item/' + ui.item.url;
66
67                    } else {
68                        window.location.href = ui.item.url;
69                    }
70
71                    return false;
72                },
73                open: function (event, ui) {
74                    event['t'] = 1;
75
76                    var autocomplete = $('ul.search.ui-autocomplete');
77
78                    autocomplete.css('width', (search.width() + 25) + 'px');
79
80                }
81
82            }).autocomplete("instance")._renderItem = function (ul, item) {
83
84
85                var terms = search.val().trim().split(' ');
86
87                var header = $('<span>').append(item.header);
88

89                terms.forEach(function (term) {
90                    header.highlight(term.trim());
91                });
92
93
94                item.header = $(header).html();
95
96                var img = null;
97                var a = $('<a>').attr('href', item.url);
98
99                if (item.all != 1) {
100                    img = $('<img>').attr('src', item['picture']);
101                    a = $('<a>').attr('href', '/item/' + item.url);
102                }
103
104                var title = $('<div>');
105                title.addClass('title');
106                title.html(item.header);
107
108                var price = $('<div>');
109                price.addClass('price');
110
111                if (item.all != 1) {
112                    price.html(item['pricecon'] + ' <i class="fa fa-rub" aria-hidden="true"></i>');
113                }
114
115                var info = $('<div>');
116                info.addClass('wrap');
117                info.append(title);
118                info.append(price);
119
120
121                if (img) {
122                    a.append(img);
123                }
124                a.append(info);
125
126
127                return $("<li>")
128                    .addClass(item.all == 1 ? 'search-all' : 'search-item')
129                    .append(a)
130                    .appendTo(ul);
131            };
132
133            search.autocomplete("instance")._renderMenu = function (ul, items) {
134                var that = this;
135
136                $.each(items, function (index, item) {
137                    that._renderItemData(ul, item);
138                });
139
140                that._renderItemData(ul, {
141                    'header': 'Показать все результаты поиска',
142                    'url': '/search/?keyword=' + search.val(),
143                    'all': 1
144                });
145            };
146
147            search.autocomplete("widget").addClass("search");
148        }
149
150    });
151})(jQuery);