TreeView Autocomplete

by Pankaj Sapkal

HTML

<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<label for="search">Search: </label>
<input id="search">

CSS

.ui-autocomplete-category {
		  font-weight: bold;
		  padding: .2em .4em;
		  margin: .8em 0 .2em;
		  line-height: 1.5;
		}

		.ui-menu .ui-menu-item {
		  padding: 0em 1.5em;
		  width: 220px;
		  clear: both;
		}

		.Products {
		  width: 220px;
		}

		.People {
		  width: 220px;
		}

JavaScript

$.widget("custom.catcomplete", $.ui.autocomplete, {

   _create: function() {
     this._super();
     this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
   },

   _renderMenu: function(ul, items) {

     var that = this,
       currentCategory = "";

     $.each(items, function(index, item) {
       var li;
       if (item.category != currentCategory) {
         ul.append("<li class='ui-autocomplete-category " + item.category + "'>" + item.category + "</li>");
         currentCategory = item.category;
       }

       li = that._renderItemData(ul, item);

       if (item.category) {
         li.attr("aria-label", item.category + " : " + item.label);
       }
     });
   },

   _renderItem: function(ul, item) {
     return $("<li>")
       .addClass(item.category)
       .attr("data-value", item.value)
       .append($("<a>").text(item.name))
       .appendTo(ul);
   }
 });

 $(function() {
   var data = [{
       label: "annhhx10 Products",
       category: "Products",
       name: "annhhx10"
     },
     {
       label: "annk K12 Products",
       category: "Products",
       name: "annk K12"
     },
     {
       label: "annttop C13",
       category: "Products"
     },
     {
       label: "bannttop C13",
       category: "Products"
     },
     {
       label: "cannttop C13",
       category: "Products"
     },
     {
       label: "dannttop C13",
       category: "Products"
     },
     {
       label: "eannttop C13",
       category: "Products"
     },
     {
       label: "fannttop C13",
       category: "Products"
     },
     {
       label: "gannttop C13",
       category: "Products"
     },
     {
       label: "hannttop C13",
       category: "Products"
     },
     {
       label: "iannttop C13",
       category: "Products"
     },
     {
       label: "jannttop C13",
       category: "Products"
     },
     {
       label: "anders andersson People",
       category: "People",
       name: "anders andersson"
     },
     {
 ...