Proper autocomplete search and keybinding handling

public_html/modules/autocomplete/search.php

@@ -13,28 +13,14 @@
 
 if(!isset($_APP)) { die("Unauthorized."); }
 
-$sNodes = Node::CreateFromQuery("SELECT * FROM nodes WHERE `LatestRevision` = 1 AND `Name` LIKE :Name", array("Name" => "%{$_GET['q']}%"));
+try
-
+{
-$sOriginalData = array(
+	$sNodes = Node::CreateFromQuery("SELECT * FROM nodes WHERE `LatestRevision` = 1 AND `Name` LIKE :Name LIMIT 5", array("Name" => "%{$_GET['q']}%"));
-	array(
+}
-		"name" => "ChicagoVPS",
+catch (NotFoundException $e)
-		"description" => "A VPS company.",
+{
-		"value" => "id-for-chicagovps",
+	$sNodes = array();
-		"created" => "2013-08-02"
+}
-	),
-	array(
-		"name" => "BuffaloVPS",
-		"description" => "A VPS company.",
-		"value" => "id-for-buffalovps",
-		"created" => "2013-08-03"
-	),
-	array(
-		"name" => "ColoCrossing",
-		"description" => "A colocation provider.",
-		"value" => "id-for-colocrossing",
-		"created" => "2013-08-06"
-	)
-);
 
 $sData = array();
 

public_html/static/css/openng.css

@@ -1,3 +1,8 @@
+.clear
+{
+	clear: both;
+}
+
 #main_toolbar, #main_toolbar button
 {
 	font-family: "Istok Web";

public_html/static/js/jquery-autocomplete.js

@@ -61,9 +61,12 @@ AutoCompleterInstance.prototype._handleKeyUp = function(event) {
 	{
 		case 9:  // Tab
 		case 13: // Enter/Return
+			if(this.visible == true)
+			{
 				this._selectCurrent();
 				event.stopPropagation();
 				event.preventDefault();
+			}
 			break;
 	}
 }
@@ -74,8 +77,11 @@ AutoCompleterInstance.prototype._handleKeyDown = function(event) {
 		case 9:  // Tab
 		case 13: // Enter/Return
 			/* We don't want this to do anything. */
+			if(this.visible == true)
+			{
 				event.stopPropagation();
 				event.preventDefault();
+			}
 			break;
 		case 38: // Arrow Up
 			this._movePrevious();
@@ -215,11 +221,13 @@ AutoCompleterInstance.prototype.continueUpdate = function() {
 }
 
 AutoCompleterInstance.prototype.hide = function() {
+	this.visible = false;
 	this.element.hide();
 	$(this.target).css({"border-bottom-left-radius": "", "border-bottom-right-radius": ""});
 }
 
 AutoCompleterInstance.prototype.show = function() {
+	this.visible = true;
 	this.element.show();
 	$(this.target).css({"border-bottom-left-radius": 0, "border-bottom-right-radius": 0});
 }

public_html/templates/index.tpl

@@ -68,6 +68,7 @@
 					<div class="clear"></div>
 					<span class="autocompleter-field description" data-field="description">Description</span>
 					<span class="autocompleter-field date" data-field="created">Creation date</span>
+					<div class="clear"></div>
 				</div>
 			</div>
 			<div class="noresults">