https://rosspen.su/catalog/view/javascript/live_search/live_search.js

1var LiveSearchJs = function () {
2
3    var init = function(options) {
4        var live_search = {
5            selector: "#search input[name='search']",
6            text_no_matches: options.text_empty,
7            height: '50px'
8        }
9        // console.log(options);
10
11        // Initializing drop down list
12        var html = '<div class="live-search"><ul></ul><div class="result-text"></div></div>';
13        $(live_search.selector).after(html);
14
15        $(live_search.selector).autocomplete({
16            'source': function(request, response) {
17                var filter_name = $(live_search.selector).val();
18                var cat_id = 0;
19                var categories_search = $('header #search select[name=\'categories\'] option:selected').val();
20                if (categories_search) {
21                    cat_id = categories_search;
22                }
23
24                var live_search_min_length = options.module_live_search_min_length;
25                if (filter_name.length < live_search_min_length) {
26                    $('.live-search').css('display','none');
27                }
28                else{
29                    var live_search_href = 'index.php?route=extension/module/live_search&filter_name=';
30                    var all_search_href = 'index.php?route=product/search&search=';
31                    if(cat_id > 0){
32                        live_search_href = live_search_href + encodeURIComponent(filter_name) + '&cat_id=' + Math.abs(cat_id);
33                        all_search_href = all_search_href + encodeURIComponent(filter_name) + '&category_id=' + Math.abs(cat_id);
34                    }
35                    else{
36                        live_search_href = live_search_href + encodeURIComponent(filter_name);
37                        all_search_href = all_search_href + encodeURIComponent(filter_name);
38                    }
39
40                    var html  = '<li style="text-align: center;height:10px;">';
41                        html += '<img class="loading" src="catalog/view/javascript/live_search/loading.gif" />';
42                        html += '</li>';
43                    $('.live-search ul').html(html);
44                    $('.live-search').css('display','block');
45
46                    $.ajax({
47                        url: live_search_href,
48                        dataType: 'json',
49                        success: function(result) {
50                            var products = result.products;
51                            $('.live-search ul li').remove();
52                            $('.result-text').html('');
53                            if (!$.isEmptyObject(products)) {
54                                var show_image       = options.module_live_search_show_image;
55                                var show_price       = options.module_live_search_show_price;
56                                var show_description = options.module_live_search_show_description;
57                                var show_add_button  = options.module_live_search_show_add_button;
58
59                                $('.result-text').html('<a href="'+all_search_href+'" class="btn btn-primary btn-block btn-xs">'+options.text_view_all_results+' ('+result.total+')</a>');
60
61                                $.each(products, function(index,product) {
62                                    var html = '<li>';
63                                        // show_add_button
64                                        if(show_add_button == "1"){
65                                            if(product.minimum == 0){
66                                                product.minimum = 1;
67                                            }
68                                            html += '<div class="product-add-cart">';
69                                            html += '<a href="javascript:;" onclick="cart.add('+product.product_id+', '+product.minimum+');" class="btn btn-primary">';
70                                            html += '<i class="fa fa-shopping-cart"></i>';
71                                            html += '</a>';
72                                            html += '</div>';
73                                        }
74                                        html += '<div>';
75                                        html += '<a href="' + product.url + '" title="' + product.name + '">';
76                                    // show image
77                                    if(product.image && show_image == "1"){
78                                        html += '<div class="product-image"><img alt="' + product.name + '" src="' + product.image + '"></div>';
79                                    }
80                                    // show name & extra_info
81                                    html += '<div class="product-name">' + product.name ;
82                                    if(show_description == "1"){
83                                        html += '<p>' + product.extra_info + '</p>';
84                                    }
85                                    html += '</div>';
86                                    // show price & special price
87                                    if(show_price == "1"){

88                                        if (product.special) {
89                                            html += '<div class="product-price"><span class="special">' + product.price + '</span><span class="price">' + product.special + '</span></div>';
90                                        } else {
91                                            html += '<div class="product-price"><span class="price">' + product.price + '</span></div>';
92                                        }
93                                    }
94                                    html += '</a>';
95                                    html += '</div>';
96
97                                    html += '</li>';
98                                    $('.live-search ul').append(html);
99                                });
100                            } else {
101                                var html = '';
102                                html += '<li style="text-align: center;height:10px;">';
103                                html += live_search.text_no_matches;
104                                html += '</li>';
105
106                                $('.live-search ul').html(html);
107                            }
108                            // $('.live-search ul li').css('height',live_search.height);
109                            $('.live-search').css('display','block');
110
111                            return false;
112                        }
113                    });
114
115                }
116            },
117            'select': function(product) {
118                $(live_search.selector).val(product.name);
119            }
120        });
121
122        $(document).bind( "mouseup touchend", function(e){
123            var container = $('.live-search');
124            if (!container.is(e.target) && container.has(e.target).length === 0) {
125                container.hide();
126            }
127        });
128    }
129
130    return {
131        //main function to initiate the module
132        init: function(options) {
133            init(options);
134        }
135    };
136
137}();
138