https://minoko.com.ua/catalog/view/javascript/search_suggestion.js

1$(document).ready(function () {
2
3  // use default autocomplete script if not defined ss_autocomplete
4  if ($.fn.ss_autocomplete === undefined) {
5    $.fn.ss_autocomplete = $.fn.autocomplete;
6  }
7
8  if (window.search_element === undefined) {
9    search_element = '#search input[name="search"]';
10  } else {
11    search_element = window.search_element;
12  }
13  
14  $(search_element).ss_autocomplete({
15    delay: 500,
16    ajax_loading: false,
17    source: function (request, response) {
18      if (request === '') {
19        this.hide();
20        return false;
21      }
22
23      const category_id = this.category_id || 0;
24
25      let url = 'index.php?route=extension/module/search_suggestion/ajax&keyword=' + encodeURIComponent(request)
26      if (category_id) {
27        url += '&category_id=' + category_id
28      } 
29
30      const self = this
31
32      $.ajax({
33        url: url,
34        dataType: 'json',
35        beforeSend: function() {
36          $('.tooltip').remove();
37        },  
38        success: function (json) {
39          response($.map(json, function (item) {
40
41            const elements = {
42              left: [],
43              center: [],
44              right: []
45            }
46
47            let more = false;
48
49            $.each(item['fields'], function (field_name, field) {
50              if (field != undefined && field[field_name] !== undefined && field[field_name]) {
51
52                if (field_name == 'more') {
53                  more = true
54                }
55
56                var field_html = '';
57                var class_name = '';
58
59                if (field_name == 'image') {
60                  let title = ''
61                  if(item['title'] != undefined && item['title']) {
62                    title = ' title="' + item['title'] + '" data-toggle="tooltip" data-placement="top" '
63                    // title = ' title="' + item['name'] + '" '
64                  }
65                  field_html = '<img src="' + field[field_name] + '" ' + title + ' />';
66                } else if (field_name == 'price') {
67                  if (field.special) {
68                    field_html = '<span class="price-old">' + field.price + '</span><span class="price-new">' + field.special + '</span>';
69                  } else {
70                    field_html = '<span class="price-base">' + field.price + '</span>';
71                  }
72                } else if (field_name == 'stock') {
73                  if (field.class != undefined) {
74                    class_name = field.class;
75                  }
76                  field_html = field[field_name];
77
78                } else {
79                  field_html = field[field_name];
80                }
81
82                if (field.label != undefined && field.label.show != undefined && field.label.show) {
83                  field_html = '<span class="label">' + field.label.label + '</span>' + field_html;
84                }
85                if (field.location != undefined && field.location == 'inline') {
86                  field_html = '<span class="' + field_name + ' ' + class_name  + '">' + field_html + '</span>';
87                } else {
88                  field_html = '<div class="' + field_name + ' ' + class_name  + '">' + field_html + '</div>';
89                }
90
91                const column = field.column || 'center'
92
93                elements[column].push({sort: field.sort, html: field_html});
94              }
95            });
96            
97            $.each(Object.keys(elements), function (index, column) {
98              elements[column].sort(function (a, b) {
99                return a.sort - b.sort
100              });  
101            });
102            
103            // implode
104            const elements_html = {
105              left: '',
106              center: '',
107              right: ''
108            }
109
110            $.each(Object.keys(elements), function (index, column) {
111              $.each(elements[column], function (index, element) {
112                if (element != undefined) {
113                  elements_html[column] = elements_html[column] + element.html;
114                }
115              });  
116            });
117            
118            let columns_html = ''
119            $.each(Object.keys(elements_html), function (index, column) {
120              if (elements_html[column].length > 0) {
121                columns_html = columns_html + '<div class="' + column + '">' + elements_html[column] + '</div>';
122              } 
123            });            
124            
125            if (item['type'] != undefined) {
126              item_type = item['type'];
127            } else {
128              item_type = '';
129            }
130
131            const classes = []
132
133            if (item['inline'] != undefined && item['inline']) {
134              classes.push('inline')
135            }              
136            if (item['active'] != undefined && item['active']) {
137              classes.push('active')
138            }              
139            if (more) {
140              classes.push('more')
141            }
142
143            columns_html = '<div class="search-suggestion ' + item_type + '">' + columns_html + '</div>';            
144
145            return {
146              label: columns_html,
147              value: item['href'],
148              class: classes.join(' '),
149              ajax: item['ajax'] || 0,
150              category_id: item['category_id'] || 0
151            };
152          }));
153        },
154        complete: function() {
155          self.focus()
156          self.category_id = 0
157          self.ajax_loading = false
158        }
159      });
160    },
161    select: function (item) {
162      if (item['value'] !== '') {
163        if (!item['ajax']) {
164          location.href = item['value'];
165        } else {
166
167          this.category_id = item['category_id']
168          this.ajax_loading = true
169
170          this.request()
171        }
172      }
173      return false;
174    },
175
176    // focus: function (event, ui) {
177    //   return true;
178    // }
179  });
180});