stored-autocomplete-0.0.1.js

jquery-stored-autocomplete-0.0.1.js

/**
 * Simple auto complete that can store values in local storage.
 *
 * Author: Tim Stevens
 * twitter:san1t1
 * 
 * To use:
 * 
 * $("selector").storedAutocomplete({source:["my","seed","values"], key:"uniqueIndexForLocalStorage"})
 * 
 * To store new values
 * $("selector").trigger("store");
 * 
 * To clear values (back to just seeded values)
 * $("selector").trigger("reset"); 
 * 
 * You can override these CSS classes. You do not need to provide them, and there is no accompanying CSS, default rules are injected on the fly if they aren't there.
 * 
 * .stored-auto-complete-list - the containing box
 * .stored-auto-complete-option - each option when unselected
 * .stored-auto-complete-option-selected - each option when unselected
 * 
 *  
 */
if(typeof jQuery != 'undefined') {
	jQuery(function($) {
		var selColor= "#ccffcc", unselColor = "#ffffff";
		var styleExists = function(selector){
			var rules;
		    var haveRule = false;
		    if (typeof document.styleSheets != "undefined") { 
		        var cssSheets = document.styleSheets;
		        outerloop:
		        for (var i = 0; i < cssSheets.length; i++) {
		            rules =  (typeof cssSheets[i].cssRules != "undefined") ? cssSheets[i].cssRules : cssSheets[i].rules;
		             for (var j = 0; j < rules.length; j++) {
		                 if (rules[j].selectorText == selector) {
		                	     haveRule = rules[j];
		                        break outerloop;
		                 }
		            }
		        }
		    }
		    return haveRule;
		};
		var cs = styleExists(".stored-auto-complete-list");
		if (cs){
			cs.style.position="absolute";
			cs.style.display="none";
			cs.style["text-align"] = "left";
			if (!cs.style["font-size"]){
				cs.style["font-size"] = "0.75em";
			}
			if (!cs.style["background-color"]){
				cs.style["background-color"] ="white";
			}
			if (!cs.style["border"]){
				cs.style.border = "solid 1px black";
			}
			if (!cs.style["border-radius"]){
				cs.style["border-radius"] = "1px";
			}
		}
		else{
			$("head").append(
					$("<style>.stored-auto-complete-list{position:absolute;display:none;font-size:0.75em;background-color:white;border:solid 1px black; text-align:left;border-radius:1px}</style>")
			);
		}
		cs = styleExists(".stored-auto-complete-option");
		var selColor = "#ccffcc";
		if (cs){
			if (!cs.style.cssText.indexOf("background-color:") > -1){
				unselColor = cs.style["background-color"];
			}
		}
		else{
			$("head").append(
					$("<style>.stored-auto-complete-option{background-color:white}</style>")
			);
		}
		cs = styleExists(".stored-auto-complete-option-selected");
		if (cs && cs.style.cssText.indexOf("background-color:") > -1){
			selColor = cs.style["background-color"];
		}
	
		$.fn.extend({
			storedAutocomplete: function(options) {
				var orig = options.source.slice(0);
				var settings = $.extend({}, $.fn.storedAutocomplete.defaults, options);
				return this.each(
					function() {
						if($.fn.jquery < '1.2.6') {return;}
						var $t = $(this);
						var selectedItem = false;
						$t.addClass("stored-auto-complete");
						var opts, key,divlist, selIndex=-1;
						var o = $.metadata ? $.extend({}, settings, $t.metadata()) : settings;
						opts = o.source;
						if (o.key !=null && "localStorage" in window){
							key = "__stored_autocomplete_"+o.key;
							if (!localStorage[key]){
								localStorage[key] = opts.join("~");
							}
						}
						var stored = localStorage[key].split("~")
						for (var i=0; i<stored.length; i++){
							if (opts.indexOf(stored[i]) ==-1){
								opts.push(stored[i]);
							}
						}
						
						$t.bind("reset", function(){
							opts = orig;
							$t.val("");
							localStorage[key] = opts.join("~");
							buildList();
						});
						$t.bind("store", function(){
							opts.push($t.val());
							localStorage[key] = opts.join("~");
						});
						
						var list = $("<div class='stored-auto-complete-list'/>");
						$t.after(list);
						var buildItem = function(opt, selected){
							var item= $("<div class='stored-auto-complete-option'>" + opt + "</div>");
							item.selected = false;
							item.hover(function(){
								item.addClass("stored-auto-complete-option-selected").css("background-color",selColor);
								if (selectedItem){
									selectedItem.removeClass("stored-auto-complete-option-selected").css("background-color",unselColor);
								}
							}, function(){
								item.removeClass("stored-auto-complete-option-selected").css("background-color",unselColor);
							}).
							click(function(){
								$t.val(opt);
							});
							if (selected){
								item.addClass("stored-auto-complete-option-selected").css("background-color",selColor);
								item.selected = true;
								selectedItem = item;
							}
							divlist.push(item);
							return item;
						};
						var buildList = function(filter){
							if (filter && filter.length && filter.length == 0){
								filter= false;
							}
							list.empty();
							divlist = [];
							var j=0;
							for (var i=0; i<opts.length; i++){
								if (!filter || opts[i].indexOf(filter)>-1){
									list.append(buildItem(opts[i],j==selIndex));
									j++;
								}
							}
						};
						buildList($t.val());
						
						var divs=[];
						var sizer = function(){
							list.css({width:$t.width()});
						};
						$(window).resize(sizer);
						sizer();
						$t.keyup(function(e){
							var prev =selIndex;
							if (e.keyCode == 38){
								selIndex = Math.max(0, selIndex -1);
								
							}
							if (e.keyCode == 40){
								selIndex = Math.min(divlist.length -1, selIndex +1);
							}
							if (e.keyCode ==13){
								for (var i=0; i<divlist.length; i++){
									if (divlist[i].selected){
										$t.val(divlist[i].text());
									}
								}
								list.hide();
							}
							buildList($t.val(), selIndex);
							
						})
						.focus(function(){
							list.show();
						})
						.blur(function(){
							setTimeout(function(){list.hide()},100);
						});
					}
				);
			}
		});
		$.fn.storedAutocomplete.defaults = {
				key:null,
				source:[]
		};
	});
}