autocomplete, continued

build/js/ox.ui.js

@@ -1535,6 +1535,7 @@ requires
                 )
                 .defaults({
                     autocomplete: null,
+                    id: "",
                     placeholder: "",
                     size: "medium",
                     type: "text"
@@ -1551,14 +1552,18 @@ requires
                 .blur(blur)
                 .change(change);
         if (options.autocomplete) {
+            self.element = that.$element[0];
+            self.menuId = self.options.id + "_menu"; // fixme: we do this in other places ... are we doing it the same way? var name?
             self.menu = new Ox.Menu({
                 element: that,
+                id: self.menuId,
                 offset: {
                     left: 4,
                     top: 0
                 },
                 size: self.options.size
             });
+            that.bindEvent("select_" + self.menuId, onSelect);
         }
         if (options.type != "textarea") {
             that.attr({
@@ -1571,12 +1576,12 @@ requires
                     return {
                         id: title.toLowerCase(), // fixme: need function to do lowercase, underscores etc?
                         title: title
-                    }
+                    };
                 });
                 self.menu.options({
-                    items: items
+                    items: items,
+                    selected: 0
                 }).showMenu();
-                that.val(self.menu.options("items")[0].title);
             } else {
                 self.menu.hideMenu();
             }
@@ -1592,6 +1597,22 @@ requires
                 $document.unbind("keypress", keypress);
             }
         }
+        function cursor() {
+            var position, range;
+            if (arguments.length == 0) {
+                
+            } else {
+                position = arguments[0];
+                if (self.element.createTextRange) {
+                    range = self.element.createTextRange();
+                    range.move("character", position);
+                    range.select();
+                } else if (self.element.selectionStart) {
+                    self.element.focus();
+                    self.element.setSelectionRange(position, position);
+                }
+            }
+        }
         function focus() {
             if (that.is(".OxPlaceholder")) {
                 that.val("").removeClass("OxPlaceholder");
@@ -1614,20 +1635,25 @@ requires
                 }
             }, 50);
         }
-        function select(start, end) {
-            var element = that.$element[0],
-                range;
-            if (element.createTextRange) {
-                range = element.createTextRange();
+        function onSelect(event, data) {
+            var position = that.val().length;
+            that.val(data.title);
+            cursor(position);
+            selectCharacters(position, data.title.length);
+        }
+        function selectCharacters(start, end) {
+            var range;
+            if (self.element.createTextRange) {
+                range = self.element.createTextRange();
                 range.collapse(true);
                 range.moveStart("character", start);
                 range.moveEnd("character", end);
                 range.select();
-            } else if (element.setSelectionRange) {
-                element.setSelectionRange(start, end);
-            } else if (element.selectionStart) {
-                element.selectionStart = start;
-                element.selectionEnd = end;
+            } else if (self.element.setSelectionRange) {
+                self.element.setSelectionRange(start, end);
+            } else if (self.element.selectionStart) {
+                self.element.selectionStart = start;
+                self.element.selectionEnd = end;
             }
         }
         return that;
@@ -2110,6 +2136,7 @@ requires
         change_groupId  {id, value}     checked item of a group has changed
         click_itemId                    item not belonging to a group was clicked
         hide_menuId                     menu was hidden
+        select_itemId                   item was selected
 
         */
 
@@ -2413,13 +2440,14 @@ requires
                         return false;
                     }
                 });
-                Ox.print("length", item.options("items").length)
                 item.options("items").length && that.submenus[item.options("id")].showMenu(); // fixme: do we want to switch to this style?
                 item.addClass("OxSelected");
             }
-            that.options({
-                selected: position
+            that.triggerEvent("select", {
+                id: item.options("id"),
+                title: item.options("title")[0] // fixme: value or title?
             });
+            self.options.selected = position;
         }
 
         function selectNextItem() {
@@ -2511,6 +2539,8 @@ requires
         self.onChange = function(key, value) {
             if (key == "items") {
                 constructItems(value);
+            } else if (key == "selected") {
+                selectItem(value);
             }
         }