https://www.kasatria.com/script/searchbox.js

1$(function() {
2	$.widget("custom.catcomplete", $.ui.autocomplete, {
3		_renderMenu: function( ul, items ) {
4			var self = this, currentCategory = "";
5			var term = self.term;
6			$.each(items, function(index, item ) {
7				if (index == 0) ul.append('<li class="ui-autocomplete-header">Suggested Pages</li>');
8				if (item.category != currentCategory) {
9					if (currentCategory == "") {
10						ul.append('<li class="ui-autocomplete-category"><h4 class="first">' + item.category + '</h4></li>');
11					} else {
12						ul.append('<li class="ui-autocomplete-category"><h4>' + item.category + '</h4></li>');
13					}
14					currentCategory = item.category;
15				}
16				self._renderItemData(ul, item);
17				if (index == items.length - 1) {
18					ul.append('<li class="ui-autocomplete-footer"><a>view more results</a></li>');
19				}
20			});
21		},
22		_renderItem: function(ul, item) {
23			var self = this;
24			var term = self.term;
25			var search = term.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
26			var aSearch = search.split(' ');
27			//console.log(item.id+":"+item.label+":"+item.category);
28			if (item.id == "" && item.label != "") {
29				item.id = "/search?q="+term;
30				return $('<li class="ui-menu-item" role="menuitem"></li>').data("item.autocomplete", item).append('<a>Try Google Custom Search for<br/>"'+item.label+'"</a>').appendTo(ul);
31			} else {
32				var sReplaced = item.label;
33				$.each(aSearch, function(i,v){
34					if (v != "") {
35						var sPattern = new RegExp("("+v+")", "gi");
36						sReplaced = sReplaced.replace(sPattern, "<u>$1</u>");
37					}
38				});
39				return $('<li class="ui-menu-item" role="menuitem"></li>').data("item.autocomplete", item).append("<a>" + sReplaced + "</a>").appendTo(ul);
40			}
41		}
42	});
43	
44	var orig_widths = new Array();
45	function createSearchBox(input, container, moveleft, defaulttop) {
46		orig_widths[input] = parseInt($(input).css("width"), 10);
47		$(input).catcomplete({
48			appendTo: container,
49			source: "/ajax.search.php?limit=5",
50			minLength: 1,
51			select: function( event, ui ) {
52				window.location.href = ui.item ? ui.item.id : "/search?q="+$(this).val();
53			} 
54			,open: function( event, ui ) {
55				var position = $(input).position();
56				var left = position.left, top = position.top;
57				$(".ui-autocomplete").css({left:left+moveleft, zIndex:99});
58			}
59		});
60		$(input).focus(function() {
61			$(this).css("width", 255);
62		});
63		$(input).focusout(function() {
64			$(this).css("width", orig_widths[input]);
65		});
66	}
67	
68	createSearchBox("#search-header-input", "#search-header-form", 0, 40);
69	createSearchBox("#search-menublack-input", "#search-menublack-form", 0, 40);
70});