WIP

frame.html

@@ -4,11 +4,13 @@
     <meta charset="utf-8" />
     <title>Sky.JS</title>
         
+    <link href="jquery-ui.min.css" rel="stylesheet" />
     <link href="style.css" rel="stylesheet" />
     <link href="sky.base.css" rel="stylesheet" />
     <link href="sky.tables.css" rel="stylesheet" />
 
     <script type="text/javascript" src="jquery.min.js"></script>
+    <script type="text/javascript" src="jquery-ui.min.js"></script>
     <script type="text/javascript" src="sky.base.js"></script>
     <script type="text/javascript" src="sky.types.js"></script>
     <script type="text/javascript" src="sky.types.reference.js"></script>
@@ -72,6 +74,10 @@
     }
     var typePerson = new SKY.prototypes.SKYReferencingType({
         referencedType: dscPerson,
+        lookup: function(p){ return $.grep( personen, function(i){ 
+            return (i.ID.search(p) != -1) || (i.Name.search(p) != -1) || (i.Beruf.search(p) != -1);
+            }
+            ) }
     });
 
     var demoDescriptor = {

sky.form.js

@@ -57,14 +57,13 @@
 				var fieldDesc = descriptor.fields[n];
 				var skyType = SKY.type(fieldDesc.type);
 				var label = $("<label></label>");
-				var editor = skyType.editor();
+				var editor = SKY.prototypes.SKYReferencingType.isPrototypeOf(skyType) ? skyType.selector(fieldDesc.name) : skyType.editor(fieldDesc.name);
 
 				label
-				.text( fieldDesc.label ? fieldDesc.label : fieldDesc.name )
+				.text( fieldDesc.label ? fieldDesc.label : fieldDesc.name ) 
 				.appendTo(this.fieldset);
 				
 				editor
-				.id( fieldDesc.name )
 				.html().appendTo(this.fieldset);
 
 				this.editors[fieldDesc.name] = editor;

sky.types.js

@@ -117,11 +117,11 @@
             SKY.type(name,Object.getPrototypeOf(this));
 		}
 
-		editor(){
+		editor(id){
-			return new SKYEditor();
+			return new SKYEditor().id(id);
         }
 
-        selector(){
+        selector(id){
             return null;
         }
         
@@ -141,8 +141,8 @@
             super("int");
         }
 
-        editor(){
+        editor(id){
-            return new SKYIntEditor();
+            return new SKYIntEditor().id(id);
         }
     }
 
@@ -152,8 +152,8 @@
             super("ipv4");
         }
 
-        editor(){
+        editor(id){
-            return new SKYEditor("000.000.000.000","^[0-9]([0-9]){0,2}\.[0-9]([0-9]){0,2}\.[0-9]([0-9]){0,2}\.[0-9]([0-9]){0,2}");
+            return new SKYEditor("000.000.000.000","^[0-9]([0-9]){0,2}\.[0-9]([0-9]){0,2}\.[0-9]([0-9]){0,2}\.[0-9]([0-9]){0,2}").id(id);
         }
 
     }
@@ -163,8 +163,8 @@
             super("network4");
         }
 
-        editor(){
+        editor(id){
-            return new SKYEditor("000.000.000.000/00","^[0-9]([0-9]){0,2}\.[0-9]([0-9]){0,2}\.[0-9]([0-9]){0,2}\.[0-9]([0-9]){0,2}\/[0-9]([0-9]){0,1}$");
+            return new SKYEditor("000.000.000.000/00","^[0-9]([0-9]){0,2}\.[0-9]([0-9]){0,2}\.[0-9]([0-9]){0,2}\.[0-9]([0-9]){0,2}\/[0-9]([0-9]){0,1}$").id(id);
         }
 
     }
@@ -175,8 +175,8 @@
             super("timespan");
         }
 
-        editor(){
+        editor(id){
-            return new SKYTimeSpanEditor();
+            return new SKYTimeSpanEditor().id(id);
         }
 
         render(value){

sky.types.reference.js

@@ -20,12 +20,17 @@
         constructor(options){
             super();
 
+            var self = this;
+
             this.options = Object.assign({}, referenceSelectorDefaultOptions);
             Object.assign(this.options,options);
 
             var html = $('<input type="text">');
             html
-                .attr(id,this.options.id);
+                .attr("id",this.options.id)
+                .autocomplete({
+                    source: function(request, response){ response(self.options.referencedType.lookup(request.term)); },
+                });
 
             this.html( html );
         }
@@ -45,12 +50,15 @@
 
         }
 
-		editor(){
+		editor(id){
-			return new SKY.prototypes.SKYEditor();
+            return this.selector(id);
         }
 
-        selector(){
+        selector(id){
-            return null;
+            return new SKYReferenceSelector({
+                referencedType: this,
+                id: id,
+            });
         }
         
         render(value){ return this.options.render(value); }