Creating Categorized/Grouped Autocomplete Menu with JQuery

JQuery has given you a nice extendable library to create auto complete. But what if you want to customize it to have something like Facebook search autocomplete menu.  Here I have gathered several features of JQuery to make this customization. Here is my JQuery with ASP.net MVC3 but you can use whatever the backend which you can return a array of Json objects like this,
Here is my Search action in SearchController




public string Search(string term) { IList searchResultViewModels = new List(); // do your search logic here, for now i'm adding some dummy resuts like below, searchResultViewModels.Add(new SearchResultViewModel { Id = 1, ImageId = 2, Name = "test", SearchResultType = SearchResultType.People }); searchResultViewModels.Add(new SearchResultViewModel { Id = 2, ImageId = 3, Name = "testsdsd", SearchResultType = SearchResultType.People }); searchResultViewModels.Add(new SearchResultViewModel { Id = 3, ImageId = 4, Name = "FFaa", SearchResultType = SearchResultType.Companies }); searchResultViewModels.Add(new SearchResultViewModel { Id = 4, ImageId = 5, Name = "Teset", SearchResultType = SearchResultType.Companies }); return Json(searchResultViewModels); }



And here is my JQuery code,



$(document).ready(function () { //To override the functionality of _renderMenu to have a categorized menu $.widget( "custom.catcomplete", $.ui.autocomplete, { _renderMenu: function( ul, items ) { var self = this, currentCategory = ""; $.each( items, function( index, item ) { if ( item.SearchResultType != currentCategory ) { ul.append( "<li class='title_sr_re'>" + item.SearchResultType + "</li>" ); currentCategory = item.SearchResultType; } self._renderItem( ul, item ); }); } }); $('#txtSearch').each(function() { //this is to implement the default text in the search textbox $.data(this, 'default', this.value); $.data(this, 'defaultColor', "black"); $(this).css("color","Gray"); }) . focus(function() { if (!$.data(this, 'edited')) { $(this).css("color", $.data(this, 'defaultColor')); this.value = ""; } }) .change(function() {//For the default value in search $.data(this, 'edited', this.value != ""); }) .blur(function() {//For the default value in search if (!$.data(this, 'edited')) { $(this).val( $.data(this, 'default')); $(this).css("color","Gray"); } }) .catcomplete({ minLength: 0, selectFirst: true, source: "@Url.Action("Search", "Search")",// I am using MVC3 here ,you can give your own URL which returns //Json objects select: function (event, ui) { // you can handle the select event of the autocomplete (I'm redirecting to another URL here) location.href='@Url.Action("ContactProfile", "Contact")' +('?profileId=')+ui.item.Id; return false; }, open: function(event, ui) { var autocomplete = $( this ).data( "catcomplete" ), menu = autocomplete.menu; //to select first item in the autocomplete (then you can press enter to select it) menu.activate( $.Event({ type: "mouseenter" }), menu.element.children().first().next()); return false; } }).data("catcomplete")._renderItem = function (ul, item) {//override renderItem function to customize menu var term=$('#txtSearch').val(); var action='yourImageUrl; return $("<li class=\"listItem\" ></li>") .data("item.autocomplete", item) .append("<a>"+ "<img src='"+action+"?thumbnailId="+item.ImageId +"'></img>" + item.Name.replace(new RegExp('(' + item.Term + ')', 'gi'), "<b>$1</b>") + "</a>") .appendTo(ul); }; });