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

1// Search suggestion autocomplete */
2(function($) {
3	$.fn.ss_autocomplete = function(option) {
4		return this.each(function() {
5			this.timer = null;
6			this.items = new Array();
7			var documentHeight = $(document).height();
8			$.extend(this, option);
9			var width = $(window).width();
10			$(this).attr('autocomplete', 'off');
11
12			// Focus
13			$(this).on('focus', function() {
14				if (!this.ajax_loading) {
15					this.request();
16				}
17			});
18
19			// Blur
20			$(this).on('blur', function() {
21				setTimeout(function(object) {
22					if(width > 992){
23					if (!object.ajax_loading) {
24						object.hide();
25					}
26					}
27				}, 200, this);
28
29			});
30
31			// Keydown
32			$(this).on('keydown', function(event) {
33				switch(event.keyCode) {
34					case 27: // escape
35						this.hide();
36						break;
37					default:
38						this.request();
39						break;
40				}
41			});
42
43			// Click
44			this.click = function(event) {
45
46				if (window.ss_btn_clicked !== undefined && window.ss_btn_clicked) {
47					window.ss_btn_clicked = false;
48					return false;
49				}
50
51				event.preventDefault();
52
53				value = $(event.target).closest('li').attr('data-value');
54
55				if (value && this.items[value]) {
56					this.select(this.items[value]);
57				}
58				console.log('click');
59			}
60
61			// Show
62			this.show = function() {
63				$('.close-mobile-search').addClass('active');
64				/*setTimeout(function() {
65					mobile();
66				}, 200);*/
67
68				var pos = $(this).position();
69				var width = $(window).width();
70				if(width > 992){
71					$(this).parent().siblings('ul.dropdown-menu').css({
72						top: pos.top + $(this).outerHeight(),
73						//left: pos.left
74						right: pos.left,
75					});
76				} else {
77					$('body, html').addClass('lock');
78					$(this).parent().siblings('ul.dropdown-menu').css({
79						top: 'calc(100% + 9px)',
80						//left: pos.left
81						right: pos.left,
82						height:'40dvh'
83					});
84				}
85
86
87				//$(this).parent().siblings('ul.dropdown-menu').show();
88				$(this).parent().siblings('ul.dropdown-menu').css('display', 'flex')
89			}
90
91			// Hide
92			this.hide = function() {
93				$('body, html').removeClass('lock');
94				$(this).parent().siblings('ul.dropdown-menu').hide();
95			}
96
97			// Request
98			this.request = function() {
99				clearTimeout(this.timer);
100
101				this.timer = setTimeout(function(object) {
102					object.source($(object).val(), $.proxy(object.response, object));
103				}, 200, this);
104			}
105
106			// Response
107			/*this.response = function(json) {
108				html = '';
109
110				if (json.length) {
111					for (i = 0; i < json.length; i++) {
112						this.items[json[i]['value']] = json[i];
113					}
114
115					for (i = 0; i < json.length; i++) {
116						if (json[i]['value']) {
117									  html += '<li data-value="' + json[i]['value'] + '" class="' + json[i]['class']  + '"><a href="#">' + json[i]['label'] + '</a></li>';
118						} else {
119						  html += '<li class="disabled">' + json[i]['label'] + '</li>';
120						}
121					}
122				}
123
124				if (html) {
125					this.show();
126				} else {
127					this.hide();
128				}
129
130				$(this).siblings('ul.dropdown-menu').html(html);
131			}*/
132
133			this.response = function(json) {
134				html = '';
135
136				if (json.length) {
137					for (i = 0; i < json.length; i++) {
138						this.items[json[i]['value']] = json[i];
139						// console.log(json[i]);
140					}
141					let count_elem = json.length-1;
142					//html +='<div class="box_search">';
143					for (i = 0; i < json.length; i++) {
144						//console.log([i][0]+' == '+count_elem);
145						if([i][0] == 0){
146							html +='<div class="box_search">';
147						}
148						if (json[i]['value']) {
149							html += '<li data-value="' + json[i]['value'] + '"><a href="#">' + json[i]['label'] + '</a></li>';
150						} else {
151							if(i != 0){
152								html +='</div>';
153							}
154							if([i][0] != 0){
155								html +='<div class="box_search">';
156							}
157							html += '<li class="disabled">' + json[i]['label'] + '</li>';
158						}
159
160						if(count_elem == [i][0]){
161							html += '</div>';
162						}
163
164					}
165					//html +='</div>';
166				}
167
168				if (html) {
169					this.show();
170				} else {
171					this.hide();
172				}
173				//console.log(html);
174				$(this).parent().siblings('ul.dropdown-menu').html(html);
175				//$('header').siblings('ul.dropdown-menu').html(html);
176			}
177
178
179
180			$(this).parent().after('<ul class="dropdown-menu"></ul>');
181			//$('header').after('<ul class="dropdown-menu"></ul>');
182			console.log($.proxy(this.click, this));
183			$(this).parent().siblings('ul.dropdown-menu').delegate('a', 'click', $.proxy(this.click, this));
184		});
185	}
186
187})(window.jQuery);