Autocompletion for property names

public_html/modules/autocomplete/propertyname.php

@@ -0,0 +1,32 @@
+<?php
+/*
+ * openNG is more free software. It is licensed under the WTFPL, which
+ * allows you to do pretty much anything with it, without having to
+ * ask permission. Commercial use is allowed, and no attribution is
+ * required. We do politely request that you share your modifications
+ * to benefit other developers, but you are under no enforced
+ * obligation to do so :)
+ * 
+ * Please read the accompanying LICENSE document for the full WTFPL
+ * licensing text.
+ */
+
+if(!isset($_APP)) { die("Unauthorized."); }
+
+try
+{
+	$sNodes = Node::CreateFromQuery("SELECT * FROM properties WHERE `LatestRevision` = 1 AND `Name` LIKE :Name GROUP BY `Name` LIMIT 5", array("Name" => "%{$_GET['q']}%"));
+}
+catch (NotFoundException $e)
+{
+	$sNodes = array();
+}
+
+$sData = array();
+
+foreach($sNodes as $sNode)
+{
+	$sData[] = array(
+		"value" => $sNode->sName
+	);
+}

public_html/rewrite.php

@@ -40,6 +40,10 @@ $router->routes = array(
 		"^/autocomplete/search$"		=> array(
 			"target"	=> "modules/autocomplete/search.php",
 			"_json"		=> true
+		),
+		"^/autocomplete/propertyname$"		=> array(
+			"target"	=> "modules/autocomplete/propertyname.php",
+			"_json"		=> true
 		)
 	)
 );

public_html/static/css/openng.css

@@ -29,30 +29,33 @@ form.inline {
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px; }
 
-#autocomplete_search {
+.autocompleter {
   display: none;
   position: absolute;
-  width: 400px;
+  /* TODO: set this in the JS! */
+  z-index: 9999999;
+  -webkit-font-smoothing: antialiased;
+  font-family: 'Istok Web';
   background-color: white;
   border: 1px solid #5a6dbb;
   border-radius: 0px 0px 3px 3px;
-  border-top: none;
-  -webkit-font-smoothing: antialiased;
-  font-family: 'Istok Web';
-  z-index: 9999999; }
+  border-top: none; }
+  .autocompleter .entry {
+    color: #393939; }
+    .autocompleter .entry.selected {
+      background-color: #4253B6;
+      color: white; }
+
+#autocomplete_search {
+  width: 400px; }
 
 #autocomplete_search .entry {
   border-bottom: 1px solid #c2c2c2;
-  padding: 7px 9px;
-  color: #393939; }
+  padding: 7px 9px; }
 
 #autocomplete_search .entry:last-child {
   border-bottom: none; }
 
-#autocomplete_search .entry.selected {
-  background-color: #4253B6;
-  color: white; }
-
 #autocomplete_search .entry .name {
   font-size: 18px;
   font-weight: bold; }
@@ -216,6 +219,11 @@ i.notification {
   margin: 4px 0px;
   padding-left: 48px; }
 
+#autocomplete_propertyname {
+  font-size: 13px; }
+  #autocomplete_propertyname .entry, #autocomplete_propertyname .noresults, #autocomplete_propertyname .loading {
+    padding: 4px 6px; }
+
 .window-inner .header, .window-inner h1, .window-inner h2 {
   margin: 4px 0px; }
 .window-inner .lower-header, .window-inner h2 {

public_html/static/js/jquery-autocomplete.js

@@ -247,8 +247,18 @@ AutoCompleterInstance.prototype.show = function() {
 		 .off('selectstart');
 	};
 	
-	$.fn.autoComplete = function(autocompleter, source, callback) {
-		this.on("input.autocomplete_hook", function(){
+	$.fn.autoComplete = function(autocompleter, source, selector, callback) {
+		if(typeof selector === "string")
+		{
+			var persistent = true;
+		}
+		else
+		{
+			var persistent = false;
+			callback = selector;  // Shift arguments
+		}
+		
+		var event = function(){
 			if(!$(this).data("attached-autocomplete"))
 			{
 				var instance = autocompleter.spawn(new source($(this)));
@@ -259,7 +269,16 @@ AutoCompleterInstance.prototype.show = function() {
 				instance._updateItems();
 				$(this).attr("autocomplete", "off");
 			}
-		});
+		};
+		
+		if(persistent === true)
+		{
+			this.on("input.autocomplete_hook", selector, event);
+		}
+		else
+		{
+			this.on("input.autocomplete_hook", event);
+		}
 		
 		return this;
 	};

public_html/static/js/openng.js

@@ -97,9 +97,6 @@ function placeHooksForWindow(win)
 			console.log("Hooking", this, "using callback", callback);
 			hookSubmitEvent($(this), window[callback], window[error_callback]);
 		}
-		
-		/*$
-		$("#thing").autoComplete(autocompleter_propertyname, new PropertyNameCompletionSource($("#thing")));*/
 	});
 }
 
@@ -294,6 +291,10 @@ $(function(){
 		this.target.val("");
 	});
 	
+	autocompleter_propertyname = new AutoCompleter("propertyname");
+	
+	$("body").autoComplete(autocompleter_propertyname, PropertyNameCompletionSource, "input.input-propertyname");
+	
 	$("body").keydown(function(event){
 		switch(event.which)
 		{
@@ -314,5 +315,3 @@ $(function(){
 		}
 	});
 });
-
-autocompleter_propertyname = new AutoCompleter("propertyname");

public_html/templates/index.tpl

@@ -79,6 +79,20 @@
 			</div>
 		</div>
 		
+		<div id="autocomplete_propertyname" class="autocompleter autocompleter-template" data-template="propertyname">
+			<div class="results">
+				<div class="entry selected">
+					<span class="autocompleter-field name" data-field="value">Property name</span>
+				</div>
+			</div>
+			<div class="noresults">
+				No results.
+			</div>
+			<div class="loading">
+				Searching...
+			</div>
+		</div>
+		
 		<div id="notification_area">
 			<!-- Notifications go here. -->
 		</div>

public_html/templates/nodes/create.tpl

@@ -31,7 +31,7 @@
 				</div>
 				
 				<div class="property auto-duplicate" data-template-name="createnode_property">
-					<input type="text" class="pure-input-1-2 group-first" name="property_name[]" placeholder="Name">
+					<input type="text" class="pure-input-1-2 group-first input-propertyname" name="property_name[]" placeholder="Name">
 					<input type="text" class="pure-input-1-2 group-last" name="property_value[]" placeholder="Value">
 				</div>
 			</div>

scss/openng.scss

@@ -45,25 +45,39 @@ form.inline
 	border-bottom-left-radius: 0px;
 }
 
-#autocomplete_search
+.autocompleter
 {
 	display: none;
-	position: absolute;
-	width: 400px;
+	position: absolute; /* TODO: set this in the JS! */
+	z-index: 9999999;
+	-webkit-font-smoothing: antialiased;
+	font-family: 'Istok Web';
 	background-color: white;
 	border: 1px solid #5A6DBB;
 	border-radius: 0px 0px 3px 3px;
 	border-top: none;
-	-webkit-font-smoothing: antialiased;
-	font-family: 'Istok Web';
-	z-index: 9999999;
+	
+	.entry
+	{
+		color: #393939;
+		
+		&.selected
+		{
+			background-color: #4253B6;
+			color: white;
+		}
+	}
+}
+
+#autocomplete_search
+{
+	width: 400px;
 }
 
 #autocomplete_search .entry
 {
 	border-bottom: 1px solid #C2C2C2;
 	padding: 7px 9px;
-	color: #393939;
 }
 
 #autocomplete_search .entry:last-child
@@ -71,12 +85,6 @@ form.inline
 	border-bottom: none;
 }
 
-#autocomplete_search .entry.selected
-{
-	background-color: #4253B6;
-	color: white;
-}
-
 #autocomplete_search .entry .name
 {
 	font-size: 18px;
@@ -314,6 +322,16 @@ i.notification
 	padding-left: 48px;
 }
 
+#autocomplete_propertyname
+{
+	font-size: 13px;
+	
+	.entry, .noresults, .loading
+	{
+		padding: 4px 6px;
+	}
+}
+
 .window-inner
 {
 	.header