WIP

frame.html

@@ -66,12 +66,18 @@
             Name: "Holger Witt",
             Beruf: "fast Chemiker",
             Alter: 38
+        },
+        {
+            ID: "ABC",
+            Name: "Max Mustermann",
+            Beruf: "Musterschüler",
+            Alter: 123
         }
     ];
 
     function lookupPersonen(q){
         return $.grep( personen, function(item,index){
-            return (item.ID.search(q)!=-1) || (item.Name.search(q)!=-1) || (item.Beruf.search(q)!=-1);
+            return !q || (item.ID.search(q)!=-1) || (item.Name.search(q)!=-1) || (item.Beruf.search(q)!=-1);
         });
     }
 

sky.controls.css

@@ -3,7 +3,7 @@
     display: none;
     position: absolute;
     min-width: 120px;
-    min-height: 28px;
+    min-height: 8px;
 
     border: 1px solid black;
     background-color: white;
@@ -15,6 +15,7 @@
 }
 
 .skyselect-item {
+    padding: 2px;
     padding-left: 4px;
     padding-right: 4px;
     cursor: pointer;
@@ -24,7 +25,7 @@
     color: white;
 }
 
-.skyselect-item:hover, .skyselect-item.active {
+.skyselect-item.active {
     background-color: #B0B0B0;
 }
 

sky.controls.js

@@ -3,6 +3,7 @@
 
 	var defOptions = {
 		type: null,
+		nullable: true,
 		
 		lookup: function(pattern,response){}
 
@@ -31,6 +32,7 @@
 				.on("focusout", function(ev){ self.onFocusOut(ev); } )
 				.on("dblclick", function(ev){ 
 					self.open();
+					self.update();
 				} );
 
 
@@ -51,10 +53,14 @@
 				this.popup.hide();
 				this.isOpen = false;
 				
-				this.element.val(
+				if (this.options.nullable && (this.element.val()==""))
-					this.selectedItem ? this.options.render(this.selectedItem) : ""
+				{
-					);
+					this.selectedItem = null;
-
+				} else {
+					this.element.val(
+						this.selectedItem ? this.options.render(this.selectedItem) : ""
+						);
+				}
 				this.activeItem = null;
 			}
 			return this;
@@ -95,14 +101,25 @@
 			this.markCurrentSelected();
 		}
 
+		update(){
+			var self = this;
+			self.options.lookup(
+				self.element.val(),
+				function(items){
+					self.items(items);
+				}
+				);
+		}
+
 		items(items){
 			var self = this;
 			this.popup.empty();
 			$.each( items, function(){
 				var item = this;
-				var li = 					$("<div></div>")
+				var li = $("<div></div>")
 				.addClass("skyselect-item")
 				.append(self.options.type.render(this))
+				.appendTo(self.popup)
 				.data("skyselect-item", this)
 				.on("click", function(ev){ 
 					self.select( item ); 
@@ -110,7 +127,6 @@
 				.on("hover", function(ev){
 					self.markActive(item);
 				});
-				self.popup.append(li);
 			})
 			this.markCurrentSelected();
 		}
@@ -147,7 +163,7 @@
 							{
 							}
 						} else {
-							var firstLi = this.popup.first("skyselect-item");
+							var firstLi = this.popup.first(".skyselect-item");
 							if (firstLi.length)
 								this.markActive(firstLi.data("skyselect-item"));
 						}
@@ -158,16 +174,11 @@
 				default:
 					console.log("ev.which=" + ev.which);
 
-					if (ev.which >= 32)
+					if ((ev.which >= 32))
 					{
 						clearInterval(this.timer);
 						this.timer = setInterval( function(){
-							self.options.lookup(
+							self.update();
-								self.element.val(),
-								function(items){
-									self.items(items);
-								}
-								)
 						}, 250);
 
 						this.open();