https://www.whisky-market.com/catalog/view/theme/cwm/vendor/extended_autocomplete.js

1// Autocomplete */
2(function($) {
3    $.fn.extended_autocomplete = function(option) {
4        return this.each(function() {
5            this.timer = null;
6            this.items = new Array();
7
8            $.extend(this, option);
9
10            $(this).attr('extended_autocomplete', 'off');
11
12            // Focus
13            $(this).on('focus', function() {
14                this.request();
15            });
16
17            // Blur
18            $(this).on('blur', function() {
19                setTimeout(function(object) {
20                    object.hide();
21                }, 200, this);
22            });
23
24            // Keydown
25            $(this).on('keydown', function(event) {
26                switch(event.keyCode) {
27                    case 27: // escape
28                        this.hide();
29                        break;
30                    default:
31                        this.request();
32                        break;
33                }
34            });
35
36            // Click
37            this.click = function(event) {
38                event.preventDefault();
39
40                value = $(event.target).closest('li').attr('data-value');
41
42                if (value && this.items[value]) {
43                    this.select(this.items[value]);
44                }
45            }
46
47            // Show
48            this.show = function() {
49                var pos = $(this).position();
50
51                $(this).siblings('ul.dropdown-menu').css({
52                    top: pos.top + $(this).outerHeight(),
53                    left: pos.left
54                });
55
56                $(this).siblings('ul.dropdown-menu').show();
57            }
58
59            // Hide
60            this.hide = function() {
61                $(this).siblings('ul.dropdown-menu').hide();
62            }
63
64            // Request
65            this.request = function() {
66                clearTimeout(this.timer);
67
68                this.timer = setTimeout(function(object) {
69                    object.source($(object).val(), $.proxy(object.response, object));
70                }, 200, this);
71            }
72
73            // Response
74            this.response = function(json) {
75                html = '';
76
77                if (json.length) {
78                    for (i = 0; i < json.length; i++) {
79                        this.items[json[i]['value']] = json[i];
80                    }
81
82                    for (i = 0; i < json.length; i++) {
83                        if (!json[i]['category']) {
84                            html += '<li data-value="' + json[i]['value'] + '">';
85                            if (json[i]['image']) {
86                                html += '<a class="kep" href="#"><img src="' + json[i]['image'] + '"></a>';
87                            }
88                            html += '<a class="szoveg" href="#">';
89                            html += '<span class="product_name">'+json[i]['label']+'</span>';// <span class="model"> '+json[i]['model']+'</span>
90                            html += '</a>';
91                            html += '</li>';
92                        }
93                    }
94
95                    // Get all the ones with a categories
96                    var category = new Array();
97
98                    for (i = 0; i < json.length; i++) {
99                        if (json[i]['category']) {
100                            if (!category[json[i]['category']]) {
101                                category[json[i]['category']] = new Array();
102                                category[json[i]['category']]['name'] = json[i]['category'];
103                                category[json[i]['category']]['item'] = new Array();
104                            }
105
106                            category[json[i]['category']]['item'].push(json[i]);
107                        }
108                    }
109
110                    for (i in category) {
111                        html += '<li class="dropdown-header">' + category[i]['name'] + '</li>';
112
113                        for (j = 0; j < category[i]['item'].length; j++) {
114                            html += '<li data-value="' + category[i]['item'][j]['value'] + '"><a href="#">&nbsp;&nbsp;&nbsp;' + category[i]['item'][j]['label'] + '</a></li>';
115                        }
116                    }
117                }
118
119                if (html) {
120                    this.show();
121                } else {
122                    this.hide();
123                }
124
125                $(this).siblings('ul.dropdown-menu').html(html);
126            }
127
128            $(this).after('<ul class="dropdown-menu"></ul>');
129            $(this).siblings('ul.dropdown-menu').delegate('a', 'click', $.proxy(this.click, this));
130            $(this).siblings('ul.dropdown-menu').delegate('img', 'click', $.proxy(this.click, this));
131            $(this).siblings('ul.dropdown-menu').delegate('span', 'click', $.proxy(this.click, this));
132        });
133    }
134})(window.jQuery);
135
136$(document).ready(function(){
137    $("input[name='search']").extended_autocomplete({
138        'source': function(request, response) {
139           $.ajax({
140                url: 'index.php?route=product/autocomplete&search=' +  encodeURIComponent(request)+'&description=' +  encodeURIComponent(request)+'&autocomplete=1',
141                dataType: 'json',
142                success: function(json) {
143                    response($.map(json, function(item) {
144                        return {

145                            label: item['name'],
146                            value: item['product_id'],
147                         }
148                    }));
149                },
150                error: function(ts) { console.log(ts.responseText) }
151            });
152        },
153        'select': function(item) {
154            url = $('base').attr('href') + 'index.php?route=product/product&product_id='+item.value;
155
156            location = url;
157            return false;
158        }
159    });
160});