Book Marx: Implement tag auto-completion.

1 files changed, 55 insertions, 0 deletions

diff --git a/static/js/bookmarx-submit.js b/static/js/bookmarx-submit.js
new file mode 100644
index 0000000..6e5ad01
--- /dev/null
+++ b/static/js/bookmarx-submit.js
@@ -0,0 +1,55 @@
+// Based on the jQuery UI autocomplete example.
+// http://jqueryui.com/demos/autocomplete/#multiple
+
+$(function() {
+    var availableTags;
+    $.ajax('tags', {
+        success: function(data){
+            availableTags = data;
+        }
+    });
+    function split(val) {
+	return val.split(/,\s*/);
+    }
+    function extractLast(term) {
+	return split(term).pop();
+    }
+
+    $("#bookmark-tags-field")
+        // don't navigate away from the field on tab when selecting an item
+	.bind("keydown", function(event) {
+	    if (event.keyCode === $.ui.keyCode.TAB &&
+		$(this).data("autocomplete").menu.active) {
+		event.preventDefault();
+	    }
+	})
+	.bind("keyup", function(event) {
+	    if (event.keyCode === $.ui.keyCode.TAB &&
+		$(this).data("autocomplete").menu.active) {
+		event.preventDefault();
+	    }
+	})
+	.autocomplete({
+	    minLength: 0,
+	    source: function(request, response) {
+		// delegate back to autocomplete, but extract the last term
+		response($.ui.autocomplete.filter(
+		    availableTags, extractLast(request.term)));
+	    },
+	    focus: function() {
+		// prevent value inserted on focus
+		return false;
+	    },
+	    select: function(event, ui) {
+		var terms = split(this.value);
+		// remove the current input
+		terms.pop();
+		// add the selected item
+		terms.push(ui.item.value);
+		// add placeholder to get the comma-and-space at the end
+		terms.push("");
+		this.value = terms.join(", ");
+		return false;
+	    }
+	});
+});