https://ks-is.com/catalog/view/javascript/live_search/live_search.js

1var LiveSearchJs = function () {
2
3    var init = function (options) {
4        var live_search = {
5            selector: "#nav-search input[name='search']",
6            text_no_matches: options.text_empty,
7            height: '50px'
8        }
9
10        // Attaching the event listener function to window's resize event
11
12        // Calling the function for the first time
13
14        var html = '<div class="live-search"><ul></ul><div class="result-text"></div></div>';
15
16        $(live_search.selector).after(html);
17
18         if (!$.fn.autocomplete) {
19            return;
20        }
21
22        $(live_search.selector).autocomplete({
23            'source': function (request, response) {
24                var filter_name = $(live_search.selector).val();
25                var cat_id = 0;
26                var live_search_min_length = options.module_live_search_min_length;
27
28
29                if( filter_name.length > 0 ) {
30                    var inputWidth = document.querySelector(".nav-search-input").clientWidth;
31                    $('.live-search').css('width', inputWidth + 'px');
32                }
33
34                if (filter_name.length < live_search_min_length) {
35
36                    var inputWidth = document.querySelector(".nav-search-input").clientWidth;
37
38                    $('.live-search').css('display', 'none');
39
40                    $('.nav-search-input').css({
41                        'border-top-left-radius': '1rem',
42                        'border-bottom-left-radius': '1rem'
43                    });
44
45                } else {
46
47                    $('.nav-search-input').css({
48                        'border-top-left-radius': '5px',
49                        'border-bottom-left-radius': '0'
50                    });
51
52                    var live_search_href = 'index.php?route=extension/module/live_search&filter_name=';
53                    var all_search_href = 'index.php?route=product/search&search=';
54
55                    if (cat_id > 0) {
56                        live_search_href = live_search_href + encodeURIComponent(filter_name) + '&cat_id=' + Math.abs(cat_id);
57                        all_search_href = all_search_href + encodeURIComponent(filter_name) + '&category_id=' + Math.abs(cat_id);
58                    } else {
59                        live_search_href = live_search_href + encodeURIComponent(filter_name);
60                        all_search_href = all_search_href + encodeURIComponent(filter_name);
61                    }
62
63                    var html = '<li style="text-align: center;height:10px;">';
64                    html += '<img class="loading" src="catalog/view/javascript/live_search/loading.gif" />';
65                    html += '</li>';
66                    $('.live-search ul').html(html);
67                    $('.live-search').css('display', 'block');
68
69                    $.ajax({
70                        url: live_search_href,
71                        dataType: 'json',
72                        success: function (result) {
73                            var products = result.products;
74                            $('.live-search ul li').remove();
75                            $('.result-text').html('');
76                            if (!$.isEmptyObject(products)) {
77                                var show_image = options.module_live_search_show_image;
78
79                                $('.result-text').html('<a href="' + all_search_href + '" class="view-all-results">' + options.text_view_all_results + ' (' + result.total + ')</a>');
80                                $.each(products, function (index, product) {
81                                    var html = '<li class="search-element">';
82
83                                    // show_add_button
84                                    html += '<a href="' + product.url + '">';
85                                    // show image
86                                    if (product.image && show_image) {
87                                        html += '<div class="product-image"><img alt="' + product.name + '" src="' + product.image + '"></div>';
88                                    }
89
90                                    // show name & extra_info
91                                    html += '<div class="product-name">' + product.name;
92                                    html += '</a>';
93                                    html += '</div>';
94                                    html += '</li>';
95                                    $('.live-search ul').append(html);
96                                });
97                            } else {
98                                var html = '';
99                                html += '<li class="search-element nofound">';
100                                html += live_search.text_no_matches;
101                                html += '</li>';
102
103                                $('.live-search ul').html(html);
104                            }
105
106                            $('.live-search').css('display', 'block');
107
108                            return false;

109                        }
110                    });
111
112                }
113            },
114            'select': function (product) {
115                $(live_search.selector).val(product.name);
116            }
117        });
118
119        $(document).bind("mouseup touchend", function (e) {
120            var container = $('.live-search');
121            if (!container.is(e.target) && container.has(e.target).length === 0) {
122                container.hide();
123            }
124        });
125    }
126
127    return {
128        //main function to initiate the module
129        init: function (options) {
130            init(options);
131        }
132    };
133
134}();
135