Jquery Autosuggest Try v1

Jquery Autosuggest Try v1

by austinnoronha

HTML

<label class="ausuggestcont">
		<input type="text" name="srchme" id="srchme" placeholder="Search ...."/>
		<ul class="res" id="res"></ul>
	</label>

CSS

.ausuggestcont{width: 300px; position:relative;}
		.ausuggest{list-style:none; border: 1px solid #eee; padding: 2px 4px; min-height:27px;}
		.ausuggest li{float:left; margin:2px 5px; }
		.ausuggest li.sel{background: none repeat scroll 0 0 #eee;border: 1px solid #ddd;border-radius: 5px;padding: 2px 5px;}
		.ausuggest li input[type="text"]{border: none;}
		.ausuggest:after{clear:both;}
		.ausuggestcont .res{position: absolute; top:50px; left:0px; background: none repeat scroll 0 0 #eee;border: 1px solid #ddd;border-radius: 5px;padding: 2px 5px;list-style:none; width: inherit;}

JavaScript

$(document).ready(function() {
	var people = ['Peter Bishop','Peterim Bishop', 'Petercon Bishop', 'Nicholas Brody', 'Gregory House', 'Hank Lawson', 'Tyrion Lannister', 'Nucky Thompson'];
	var cache = {};
	var drew = false;
	var srchBox = $("#srchme");
	var resBox = $("#res");
	srchBox.wrap( "<ul class='ausuggest'><li></li></ul>" );
	var searchBoxLi = srchBox.parent();

	srchBox.on("keyup", function(event) {
		var query = srchBox.val()

		if (srchBox.val().length > 2) {
			//Check if we've searched for this term before
			if (query in cache) {
				results = cache[query];
			} else {
				//Case insensitive search for our people array
				var results = $.grep(people, function(item) {
					return item.search(RegExp(query, "i")) != -1;
				});
				//Add results to cache
				cache[query] = results;
			}
			//First search
			if (drew == false) {
				//#srchme list for results
				srchBox.after('<ul id="res"></ul>');
				//Prevent redrawing/binding of list
				drew = true;
				//Bind click event to list elements in results
				resBox.on("click", "li", function() {
					var searchVal = $(this).text();
					var selValLi = 	$( "<li class='sel'>"+$(this).text()+"</li>" );
					selValLi.insertBefore(searchBoxLi)
					srchBox.val("");
					resBox.empty();
				});
			}
			//Clear old results
			else {
				resBox.empty();
			}
			//Add results to the list
			for (term in results) {
				resBox.append("<li>" + results[term] + "</li>");
			}
		}
		//Handle backspace/delete so results don't remain with less than 3 characters
		else if (drew) {
			resBox.empty();
		}
	});
});