initial version

mspierenburg · Apr 20, 2011 · 2d94872 · 2d94872
commit 2d94872
Show file tree

Hide file tree

Showing 5 changed files with 309 additions and 0 deletions.
diff --git a/README b/README
@@ -0,0 +1,28 @@
+superbly fields 
+http://www.superbly.ch
+
+Copyright 2011, Manuel Spierenburg
+Dual licensed under the MIT or GPL Version 2 licenses.
+http://www.superbly.ch/licenses/mit-license.txt
+http://www.superbly.ch/licenses/gpl-2.0.txt
+
+#############
+# changelog #
+#############
+version 0.1
+ - initial version
+
+##############
+# descrption #
+##############
+
+collection of different fields for html forms.
+
+suggest field:
+- makes suggestions according to given array
+
+number field:
+- only allows number input
+
+select field:
+- fill html select box with array
diff --git a/index.html b/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js" ></script>
+<script type="text/javascript" src="superbly-fields.min.js" ></script>
+<link rel="stylesheet" type="text/css" href="superbly-fields.css">
+ <script type="text/javascript">
+        $(function() {
+            var carTags = ['Alfa Romeo','Aston Martin','Audi','Bentley','Bugatti','BMW','Citroen','Cadillac','Chevrolet','Dodge','Daewoo','Ferrari','Ford','Fiat','Honda','Hyundai','Jaguar','Jeep','Kia','Lada','Lexus','Lotus','Maserati','Mazda','Mercedes','Nissan','Opel','Peugeot','Porsche','Rover','Renault','Suzuki','Subaru','Seat','Toyota','Volvo','Vauxhall','VW'];
+
+            // Initialize Demo 1
+            $("#suggestfield").superblySuggestField({
+                suggestions: carTags
+            });
+
+             $("#numberfield").superblyNumberField();
+             $("#selectfield").superblySelectField(carTags);
+
+     	});
+</script>
+</head>
+<body>
+<h2>superbly fields demo</h2>
+<div>
+
+	<label>number field demo:</label>
+	<div>
+	<input id="numberfield" type="text">
+	</div>
+	<br/>
+	<label>suggest field demo:</label>
+	<input id="suggestfield" type="text"><br/>	
+	<br/>
+	<label>drop down demo:</label>
+	<div>
+	<select id="selectfield"></select>
+	<br/>	
+	</div>
+	<br/>
+
+</div>
+</body>
+</html>
diff --git a/superbly-fields.css b/superbly-fields.css
@@ -0,0 +1,39 @@
+input{
+	border: solid 1px #7aa9e3;
+	background-color: #FFFFFF;
+}
+
+
+.superblySuggestItems{
+ 	position: absolute;
+    margin: 0px;
+    padding: 0px;
+}   
+
+.superblySuggestItems .superblySuggestItem{
+    font-size:11px;
+	font-family: Verdana, Arial, Georgia, Helvetica, sans-serif;
+    padding: 3px;
+    padding-left: 5px;
+    padding-right: 5px;
+	background-color: #bbcee4;
+    border: solid 1px #bbcee4;
+	list-style: none;
+	float: none;
+    color: #000000;
+}
+
+.superblySuggestItems .superblySuggestItem:hover{
+   	cursor: pointer;
+    border: solid 1px #181B38;
+}
+
+.superblySuggestItems .selected{
+	background-color: #7aa9e3;
+    border: solid 1px #7aa9e3;
+}
+
+select{
+	border: solid 1px #7aa9e3;
+	background-color: #FFFFFF;
+}
diff --git a/superbly-fields.js b/superbly-fields.js
@@ -0,0 +1,178 @@
+/*!
+ * superbly fields 
+ * http://www.superbly.ch
+ *
+ * Copyright 2011, Manuel Spierenburg
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://www.superbly.ch/licenses/mit-license.txt
+ * http://www.superbly.ch/licenses/gpl-2.0.txt
+ *
+ * Date: Wed Apr 20 23:43
+ */
+(function($){
+    $.fn.superblySuggestField = function(userOptions) {
+        var settings = {
+            showSuggestionsNumber:10,
+            suggestions:[],
+        };
+
+        if(userOptions) {
+            $.extend(settings, userOptions);
+        }
+
+        superblySuggestField(this, settings);
+
+        return this;
+    };
+
+    var keyMap = {
+        downArrow:40,
+        upArrow:38,
+        enter:13,
+        tab:9,
+        backspace:8
+    }
+	function superblySuggestField(suggestField,settings){
+
+		var suggestions = settings.suggestions.sort();
+        var showSuggestionsNumber = settings.showSuggestionsNumber;
+
+		//prepare needed vars
+		var currentValue = null;
+		var cuttentItem = null;
+		var selectedIndex = null;
+		var hoverSuggestItems = false;
+		var suggestionstmp = suggestions.slice();
+
+		suggestField.wrap("<div class='superblySuggestFieldDiv' />");
+		suggestField.after("<ul class='superblySuggestItems' />");
+
+		suggestField.next('.superblySuggestItems').mouseover(function(e){
+			hoverSuggestItems = true;
+		});
+
+		suggestField.next('.superblySuggestItems').mouseleave(function(e){
+			hoverSuggestItems = false;
+		});
+
+
+   		suggestField.keyup(function(e){
+			if(e.keyCode == keyMap.downArrow) {			
+				selectDown();
+			}else if(e.keyCode == keyMap.upArrow) {
+				selectUp()
+			}else if(e.keyCode == keyMap.enter || e.keyCode == keyMap.tab) {
+				if(currentItem != null){
+					suggestField.val(currentItem);
+					suggestField.next('.superblySuggestItems').css('display', 'none');
+				}
+			}else{
+				suggest($(this).val());
+			}
+   		});
+
+   		suggestField.focus(function(e){
+   			suggest($(this).val());
+   		});
+
+
+   		suggestField.focusout(function(e){
+   			if(!hoverSuggestItems){
+   				suggestField.next('.superblySuggestItems').css('display', 'none');
+   			}
+   		});
+
+
+
+   		function suggest(value){
+   			suggestField.next('.superblySuggestItems').show();
+   			// if input has not changed at all don't do anything
+			if(value == currentValue){
+				return false;
+			}
+			suggestField.next('.superblySuggestItems').children('.superblySuggestItem').remove();
+			currentValue = value;
+			var suggestions = getSuggestionsArray(value);
+			for(key in suggestions){
+				suggestField.next('.superblySuggestItems').append("<li class=\"superblySuggestItem\" >" + suggestions[key] + "</li>");
+			}
+			selectedIndex=null;
+			// add click listener 
+			suggestField.next('.superblySuggestItems').children('.superblySuggestItem').click(function(e){
+				currentItem = ($(this).html());
+				suggestField.val(currentItem);
+				suggestField.next('.superblySuggestItems').css('display', 'none');
+			});
+		}
+
+		function getSuggestionsArray(value){
+			var suggestions = new Array();
+    		var count = 0;
+			for(key in suggestionstmp){
+        		if(showSuggestionsNumber <= count){
+        			break;
+        		}
+				// if beginning is same
+				var lower_case_tag = suggestionstmp[key].toLocaleLowerCase();
+				var lower_cast_value = value.toLowerCase();
+				if((lower_case_tag).indexOf(lower_cast_value) == 0){
+					suggestions.push(suggestionstmp[key]);
+					count++;
+				}
+			}
+			return suggestions;
+		}
+
+		function selectDown(){
+			var size = suggestField.next('.superblySuggestItems').children('.superblySuggestItem').size();
+			if(selectedIndex == null){
+				selectedIndex=0;
+			}else if(selectedIndex < size-1){
+				$(suggestField.next('.superblySuggestItems').children('.superblySuggestItem')[selectedIndex]).removeClass("selected");
+				selectedIndex++;
+			}
+			$(suggestField.next('.superblySuggestItems').children('.superblySuggestItem')[selectedIndex]).addClass("selected");
+			currentItem = $(suggestField.next('.superblySuggestItems').children('.superblySuggestItem')[selectedIndex]).html();
+		}
+
+		function selectUp(){
+			if(selectedIndex == 0){
+				selectedIndex=null;
+				currentItem = null;
+				suggestField.focus();
+			} else if(selectedIndex >0){
+				$(suggestField.next('.superblySuggestItems').children('.superblySuggestItem')[selectedIndex]).removeClass("selected");
+				selectedIndex--;
+				$(suggestField.next('.superblySuggestItems').children('.superblySuggestItem')[selectedIndex]).addClass("selected");
+				currentItem = $(suggestField.next('.superblySuggestItems').children('.superblySuggestItem')[selectedIndex]).html();
+
+			}
+		}
+
+
+	}
+
+})(jQuery);
+
+(function($){
+    $.fn.superblyNumberField = function() {
+
+		this.keydown(function (event) { 
+			// 0-9 or numpad 0-9 
+			if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)){ 
+			// check textbox value now and tab over if necessary 
+			} else if (event.keyCode != 8 && event.keyCode != 46 && event.keyCode != 37 && event.keyCode != 39){ 
+				event.preventDefault(); 
+			} 
+			// else the key should be handled normally 
+		});
+	} 
+})(jQuery);
+
+(function($){
+    $.fn.superblySelectField = function(selectOptions) {
+		for(key in selectOptions){
+			this.append('<option value="' + selectOptions[key] + '">' + selectOptions[key] + '</option>');
+		}
+	} 
+})(jQuery);
diff --git a/superbly-fields.min.js b/superbly-fields.min.js