WIP

frame.html

@@ -57,13 +57,13 @@
     var personen = [
         {
             ID: "HWO",
-            Name: "Harald",
+            Name: "Harald Wolff-Thobaben",
             Beruf: "Entwickler",
             Alter: 39
         },
         {
             ID: "HWI",
-            Name: "Holger",
+            Name: "Holger Witt",
             Beruf: "fast Chemiker",
             Alter: 38
         }
@@ -84,7 +84,10 @@
     }
     var typePerson = new SKY.prototypes.SKYReferencingType("person",{
         referencedType: dscPerson,
-        lookup: function(p,response){ response(lookupPersonen(p)); },
+        lookup: function(p,response){ 
+            var matches = lookupPersonen(p);
+            response(matches); 
+        },
         render: function(v){ return `[${v.ID}] ${v.Name}`; }
     });
 

sky.controls.css

@@ -19,12 +19,12 @@
     padding-right: 4px;
     cursor: pointer;
 }
-.skyselect-item[selected] {
+.skyselect-item.selected {
     background-color: blue;
     color: white;
 }
 
-.skyselect-item:hover {
+.skyselect-item:hover, .skyselect-item.active {
     background-color: #B0B0B0;
 }
 

sky.controls.js

@@ -25,13 +25,19 @@
 				.addClass("skyselect-popup")
 				.appendTo(this.wrap);
 
-			this.element.on("keydown", function(ev){ self.onKeyDown(ev); } );
+			this.element
-			this.element.on("focusin", function(ev){ self.onFocusIn(ev); } );
+				.on("keydown", function(ev){ self.onKeyDown(ev); } )
-			this.element.on("focusout", function(ev){ self.onFocusOut(ev); } );
+				.on("focusin", function(ev){ self.onFocusIn(ev); } )
+				.on("focusout", function(ev){ self.onFocusOut(ev); } )
+				.on("dblclick", function(ev){ 
+					self.open();
+				} );
+
 
 			this.type = SKY.type(this.options.type);
 
 			this.selectedItem = null;
+			this.activeItem = null;
 			this.timer = null;
 		}
 		html(){ return this.wrap; }
@@ -45,18 +51,48 @@
 				this.popup.hide();
 				this.isOpen = false;
 				
-				this.element.attr(
+				this.element.val(
-					"value",
 					this.selectedItem ? this.options.render(this.selectedItem) : ""
 					);
+
+				this.activeItem = null;
 			}
 			return this;
 		}
 
+		markCurrentSelected(){
+			var self = this;
+			var currentSelectedIdentity = self.options.type.identity(self.selectedItem);
+			this.popup.children(".skyselect-item").each(function(){
+				var li = $(this);
+				var item = li.data("skyselect-item");
+				if (self.options.type.identity(item) == currentSelectedIdentity)
+					li.addClass("selected");
+				else
+					li.removeClass("selected");
+			});
+		}
+
+		markActive(item){
+			var self = this;
+			var currentActiveIdentity = self.options.type.identity(item);
+			self.activeItem = item;
+
+			this.popup.children(".skyselect-item").each(function(){
+				var li = $(this);
+				var item = li.data("skyselect-item");
+				if (self.options.type.identity(item) == currentActiveIdentity)
+					li.addClass("active");
+				else
+					li.removeClass("active");
+			});
+		}
+
 		select(item){
 			this.close();
 			this.selectedItem = item;
-			this.element.attr("value", this.options.type.render(item));
+			this.element.val(this.options.type.render(item));
+			this.markCurrentSelected();
 		}
 
 		items(items){
@@ -64,16 +100,19 @@
 			this.popup.empty();
 			$.each( items, function(){
 				var item = this;
-				self.popup.append(
+				var li = 					$("<div></div>")
-					$("<div></div>")
+				.addClass("skyselect-item")
-						.addClass("skyselect-item")
+				.append(self.options.type.render(this))
-						.append(self.options.type.render(this))
+				.data("skyselect-item", this)
-						.data("skyselect-item", this)
+				.on("click", function(ev){ 
-						.on("click", function(ev){ 
+					self.select( item ); 
-							self.select( item ); 
+				} )
-						} )
+				.on("hover", function(ev){
-					);
+					self.markActive(item);
+				});
+				self.popup.append(li);
 			})
+			this.markCurrentSelected();
 		}
 
 		onKeyDown(ev){
@@ -84,23 +123,55 @@
 				case 27:	// ESC
 					this.close();
 					break;
+				case 38:	// UP
+					if (this.isOpen){
+						var currentActiveLi = $(".skyselect-item.active", this.popup);
+						if (currentActiveLi.length){
+							var nextLi = currentActiveLi.next(".skyselect-item");
+							if (nextLi.length)
+							{
+							}
+						} else {
+							var firstLi = this.popup.first("skyselect-item");
+							if (firstLi.length)
+								this.markActive(firstLi.data("skyselect-item"));
+						}
+					}
+					break;
 				case 40:	// DOWN
-					this.open();
+					if (this.isOpen){
+						var currentActiveLi = $(".skyselect-item.active", this.popup);
+						if (currentActiveLi.length){
+							var nextLi = currentActiveLi.next(".skyselect-item");
+							if (nextLi.length)
+							{
+							}
+						} else {
+							var firstLi = this.popup.first("skyselect-item");
+							if (firstLi.length)
+								this.markActive(firstLi.data("skyselect-item"));
+						}
+					} else {
+						this.open();
+					}
 					break;
 				default:
 					console.log("ev.which=" + ev.which);
 
-					clearInterval(this.timer);
+					if (ev.which >= 32)
-					this.timer = setInterval( function(){
+					{
-						self.options.lookup(
+						clearInterval(this.timer);
-							self.element.attr("value"),
+						this.timer = setInterval( function(){
-							function(items){
+							self.options.lookup(
-								self.items(items);
+								self.element.val(),
-								self.open();
+								function(items){
-							}
+									self.items(items);
-							)
+								}
-					}, 250);
+								)
+						}, 250);
 
+						this.open();
+					}
 
 					break;
 			}
@@ -110,7 +181,7 @@
 		}
 		onFocusOut(ev){
 			var self = this;
-			//setTimeout( function(){ self.close(); }, 100 );
+			setTimeout( function(){ self.close(); }, 100 );
 		}
 
 	}

sky.types.reference.js

@@ -12,7 +12,7 @@
         lookup: function(pattern,response){},
         render: function(o){ return o; },
         parse:  function(src){ return src; },
-        id:     function(o){ return o; },
+        identity:function(o){ return o; },
     }
 
     class SKYReferenceSelector extends SKY.prototypes.SKYSelector {
@@ -79,6 +79,7 @@
         render(value){ return this.options.render(value); }
         parse(src){ return this.options.parse(src); }
         lookup(pattern,response){ this.options.lookup(pattern,response); }
+        identity(value){ return this.options.identity(value); }
     }
 
     SKY.prototypes.SKYReferencingType = SKYReferencingType;