https://marli.de/javascript/autocomplete.js

1// http://phpjs.org/functions/strncmp/
2function strncmp (str1, str2, lgth) {
3  var s1 = (str1 + '').substr(0, lgth);
4  var s2 = (str2 + '').substr(0, lgth);
5
6  return ((s1 == s2) ? 0 : ((s1 > s2) ? 1 : -1));
7}
8
9$(document).ready(function() {
10
11	var $form_schnellsuche = $('.navigation-toolbar .topsearch').first();
12	var $input_schnellsuche = $('input[type=text]', $form_schnellsuche).first();
13	
14	var timer = false;
15	var last_search = false;
16	var last_result = false;
17	var maxwords = 0;
18	var last_typed_val = false;
19	var last_accepted_val = false;
20	
21	// init
22	$form_schnellsuche.append('<br><ul id="autocomplete"></ul>'); // ie fix
23	var $autocomplete = $('ul#autocomplete', $form_schnellsuche);
24	
25	var bind_li_actions = function() {
26	
27		$('li', $autocomplete).unbind('mouseenter').mouseenter(function() {
28			$(this).addClass('selected');
29		});
30		$('li', $autocomplete).unbind('mouseleave').mouseleave(function() {
31			$('li', $autocomplete).removeClass('selected');
32		});
33		
34		$('li', $autocomplete).unbind('click').click(function() {
35			$input_schnellsuche.val($(this).text());
36			$autocomplete.hide().empty();
37			$form_schnellsuche.submit();
38		});
39	
40	};
41	
42	var update_list = function(words) {
43	
44		$autocomplete.hide().empty();
45		$autocomplete.append('<li class="stop first" style="display: none;"></li>');
46		var count = 0;
47		for (i in words)
48		{
49			count ++;
50			var words_highlighted = '<b>' + words[i].substr(0, last_typed_val.length) + '</b>' + words[i].substr(last_typed_val.length);
51			$autocomplete.append('<li>'+words_highlighted+'</li>');
52		}
53		$autocomplete.append('<li class="stop last" style="display: none;"></li>');
54		
55		if (count)
56		{
57			$autocomplete.show();
58		}
59		
60		bind_li_actions();
61	};
62	
63	var get_autocomplete = function(search) {
64				
65		// unterscheidet sich von der letzten Abfrage?
66		if (search != last_search)
67		{
68			//var lang = language;
69			var lang = 'de'; // es gibt nur de
70			$.post('/incl/autocomplete.php', { search: search, lang: lang }, function(data) {
71			
72				last_result = data.words;
73				maxwords = data.maxwords
74				
75				update_list(data.words);
76				last_search = search;
77			
78			}, 'json');
79		}
80		
81		timer = false;
82	};
83	
84	var filter_autocomplete = function(search) {
85		
86		var words = new Array();
87		for (i in last_result)
88		{
89			if (strncmp(last_result[i].toLowerCase(), search.toLowerCase(), search.length) === 0)
90			{
91				words.push(last_result[i]);
92			}
93		}
94		
95		update_list(words);
96		
97	};
98	
99	$input_schnellsuche.keyup(function(evt) {
100	
101		var search = $(this).val();
102		var do_update = false;
103		
104		// up / down keys
105		var invalid_key = (evt.keyCode == 38 || evt.keyCode == 40);
106		
107		if (search.length < 2 || last_typed_val == $(this).val() || invalid_key)
108		{
109			if (search.length < 2)
110			{
111				$autocomplete.hide().empty();
112			}
113
114			last_typed_val = $(this).val();
115
116			return true;
117		}
118		else
119		{
120			last_typed_val = $(this).val();
121		}
122		
123		if (timer)
124		{
125			window.clearTimeout(timer);
126			timer = false;
127		}
128		
129		// Auf der Länge der letzten Abfrage gleich -> einfach das letzte Ergebnis weiter filtern
130		if (last_result && last_search && strncmp(search.toLowerCase(), last_search.toLowerCase(), last_search.length) === 0)
131		{
132			filter_autocomplete(search);
133			// mehr Ergebnisse zu erwarten?
134			if (last_result.length >= maxwords)
135			{
136				do_update = true;
137			}
138		}
139		else
140		{
141			do_update = true;
142		}
143		
144		if (do_update)
145		{
146			timer = window.setTimeout(function() { get_autocomplete(search); }, 300);
147		}
148		
149		last_accepted_val = search;
150	});
151	
152	$input_schnellsuche.keydown(function(evt) {
153		
154		var down = (evt.keyCode == 40);
155		var up = (evt.keyCode == 38);
156		var esc = (evt.keyCode == 27);
157		
158		var $selected = false;
159		
160		if (down || up) {
161			$selected = $('li.selected', $autocomplete);
162		}
163		
164		if (down) {
165			if ($selected.length)
166			{
167				$selected.removeClass('selected');
168				if ($selected.next().hasClass('stop'))
169				{
170					$input_schnellsuche.val(last_accepted_val);
171				}
172				else
173				{
174					$selected.next().addClass('selected');
175					$input_schnellsuche.val($('li.selected', $autocomplete).text());
176				}
177			}
178			else
179			{
180				$('li', $autocomplete).not('.stop').first().addClass('selected');
181				$input_schnellsuche.val($('li.selected', $autocomplete).text());
182			}
183			
184			return false;

185		}
186		
187		if (up) {
188			if ($selected.length)
189			{
190				$selected.removeClass('selected');
191				if ($selected.prev().hasClass('stop'))
192				{
193					$input_schnellsuche.val(last_accepted_val);
194				}
195				else
196				{
197					$selected.prev().addClass('selected');
198					$input_schnellsuche.val($('li.selected', $autocomplete).text());
199				}
200			}
201			else
202			{
203				$('li', $autocomplete).not('.stop').last().addClass('selected');
204				$input_schnellsuche.val($('li.selected', $autocomplete).text());
205			}
206			
207			return false;
208		}
209		
210		if (esc) {
211			$autocomplete.hide().empty();
212			$input_schnellsuche.val(last_accepted_val);
213		}
214		
215	});
216	
217	$input_schnellsuche.blur(function() {
218		window.setTimeout(function() { $autocomplete.empty() }, 100);
219	});
220	$input_schnellsuche.focus(function() {
221		last_search = false;
222		if ($(this).val().length >= 2)
223		{
224			get_autocomplete($(this).val());
225		}
226	});
227
228});