diff --git a/frame.html b/frame.html index 5425985..3ef1513 100644 --- a/frame.html +++ b/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); }); } diff --git a/sky.controls.css b/sky.controls.css index 3929c05..6c79a93 100644 --- a/sky.controls.css +++ b/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; } diff --git a/sky.controls.js b/sky.controls.js index 56882f1..0ada62e 100644 --- a/sky.controls.js +++ b/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( - this.selectedItem ? this.options.render(this.selectedItem) : "" - ); - + if (this.options.nullable && (this.element.val()=="")) + { + 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 = $("
") + var li = $("
") .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.element.val(), - function(items){ - self.items(items); - } - ) + self.update(); }, 250); this.open();