gui: autocomplete: added keyboard handlers for arrow up, down and return

TODO

@@ -18,7 +18,6 @@ GENERAL
   - when something went wrong loading the script
  - add language switch
  - split off into it's own project
- - remove dependency on util.js (that was silly)
  - add caching
 - buildscripts
  - concat all javascript

css/master.css

@@ -126,6 +126,10 @@ fieldset {
 	border-top:none;
 }
 
+.autocomplete .current {
+	background:#F38630;
+}
+
 /* search results */
 table.results {
 	margin:10px 0;

index.html

@@ -148,27 +148,27 @@ <h1>What is iRail?</h1>
 
 		<script type="text/html" id="departure_autocomplete_template">
 		<![CDATA[
-		<%= _.partial('autocomplete', {values:values}) %>
+			<%= _.partial('autocomplete', {values:values, position:position}) %>
 		]]>
 		</script>
 
 		<script type="text/html" id="arrival_autocomplete_template">
 		<![CDATA[
-		<%= _.partial('autocomplete', {values:values}) %>
+			<%= _.partial('autocomplete', {values:values, position:position}) %>
 		]]>
 		</script>
 
 		<script type="text/html" id="station_autocomplete_template">
 		<![CDATA[
-			<%= _.partial('autocomplete', {values:values}) %>
+			<%= _.partial('autocomplete', {values:values, position:position}) %>
 		]]>
 		</script>
 
 		<script type="text/html" id="_autocomplete">
 		<![CDATA[
 			<ul>
 			<% for (var i=0; i<values.length; i++) { %>
-				<li><%= values[i] %></li>
+				<li<%= (position==i ? ' class="current"' : '') %>><%= values[i] %></li>
 			<% } %>
 			</ul>
 		]]>

js/autocomplete.js

@@ -10,27 +10,45 @@ var autoComplete = function(el, data) {
 
 	var initialize = function(el, data) {
 		var insideClick = false;
+		var position = 0;
+		var values = [];
 
 		// update suggestion list on keystrike or focus
 		_.addEvent(el, ['keyup', 'focus'], function(ev) {
-			_.update(autocompleteId, {values:suggestions(ev.currentTarget.value)});
+			if (ev.keyCode && ev.keyCode==40) {
+				if (position < (values.length-1)) {
+					position++;
+				}
+			} else if (ev.keyCode && ev.keyCode==38) {
+				if (position > 0) {
+					position--;
+				}
+			} else if (ev.keyCode && ev.keyCode==13) {
+				el.value = values[position];
+				values = [];
+			} else {
+				values = suggestions(ev.currentTarget.value);
+				position = 0;
+			}
+
+			_.update(autocompleteId, {values:values, position:position});
 		});
 
 		// select item from list
 		_.addEvent(document.getElementById(autocompleteId), 'click', function(ev) {
 			var li = _.target(ev);
 			el.value = li.innerHTML.replace(/^\s+|\s+$/g);
-			_.update(autocompleteId, {values:[]});
+			_.update(autocompleteId, {values:[], position:0});
 			_.stopEvent(ev);
 		});
 
 		// hide suggestionlist when clicking outside of input and list
-		_.addEvent([el, document.getElementById(autocompleteId)], 'click', function(ev) {
-			_.stopEvent(ev);
-		});
-		_.addEvent(document.body, 'click', function(ev) {
-			_.update(autocompleteId, {values:[]});
-		});
+		// _.addEvent([el, document.getElementById(autocompleteId)], 'click', function(ev) {
+		// 	_.stopEvent(ev);
+		// });
+		// _.addEvent(document.body, 'click', function(ev) {
+		// 	_.update(autocompleteId, {values:[], position:0});
+		// });
 	};
 
 	// this is an initial naive implementation