first steps towards autocomplete

build/js/ox.ui.js

@@ -455,12 +455,12 @@ requires
         $(function() {
             // fixme: how to do this better?
             if ($.browser.safari) {
-                $document.keydown(keydown);                
+                $document.keydown(keypress);                
             } else {
-                $document.keypress(keydown);
+                $document.keypress(keypress);
             }
         });
-        function keydown(event) {
+        function keypress(event) {
             var key,
                 keys = [],
                 ret = true,
@@ -1153,10 +1153,10 @@ requires
                     orientation: "horizontal",
                     size: 16
                 })
-                .options(options || {}),
+                .options(options || {})
+                .addClass("OxBar Ox" + Ox.toTitleCase(self.options.orientation)),
             dimensions = oxui.getDimensions(self.options.orientation);
-        that.addClass("OxBar Ox" + Ox.toTitleCase(self.options.orientation))
+        that.css(dimensions[0], "100%")
-            .css(dimensions[0], "100%")
             .css(dimensions[1], self.options.size + "px");
         return that;
     };
@@ -1208,6 +1208,8 @@ requires
     */
 
     Ox.Dialog = function(options, self) {
+        // fixme: this was just pasted from previous version ... update
+        // fixme: dialog should be derived from a generic draggable
         var self = self || {},
             options = $.extend({
                 title: "",
@@ -1528,43 +1530,82 @@ requires
 
     Ox.Input = function(options, self) {
         var self = self || {},
-            that = new Ox.Element(options.type=='textarea'?'textarea':'input', self)
+            that = new Ox.Element(
+                    options.type == "textarea" ? "textarea" : "input", self
+                )
                 .defaults({
+                    autocomplete: null,
                     placeholder: "",
                     size: "medium",
                     type: "text"
                 })
-                .options(options || {});
+                .options(options || {})
-        if(options.type != 'textarea') {
+                .attr({
-            that.attr({type: self.options.type})
+                    placeholder: self.options.placeholder
+                })
+                .addClass(
+                    "OxInput Ox" + Ox.toTitleCase(self.options.size) +
+                    " OxPlaceholder"
+                )
+                .focus(focus)
+                .blur(blur)
+                .change(change);
+        if (options.autocomplete) {
+            self.menu = new Ox.Menu({
+                element: that,
+                offset: {
+                    left: 4,
+                    top: 0
+                },
+                size: self.options.size
+            });
+        }
+        if (options.type != "textarea") {
+            that.attr({
+                type: self.options.type
+            });
+        }
+        function autocomplete(items) {
+            items = $.map(items, function(title) {
+                return {
+                    id: title.toLowerCase(), // fixme: need function to do lowercase, underscores etc?
+                    title: title
+                }
+            });
+            self.menu.options({
+                items: items
+            }).showMenu();
         }
-        that.attr({
-                placeholder: self.options.placeholder
-            })
-            .addClass("OxInput Ox" +
-                    Ox.toTitleCase(self.options.size) + " OxPlaceholder")
-            //.change(change)
-            .focus(focus)
-            .blur(blur);
-        /* doesn't work yet
         function change() {
-            Ox.print("change", that.val(), that.hasClass("OxPlaceholder"))
+            
-            if ((that.val() !== "") != that.hasClass("OxPlaceholder")) {
-                that.toggleClass("OxPlaceholder");
-            }
-        }
-        */
-        function focus() {
-            Ox.print("focus", that.val(), that.attr("class"))
-            if (that.hasClass("OxPlaceholder")) {
-                that.val("").removeClass("OxPlaceholder");
-            }
         }
         function blur() {
-            Ox.print("blur", that.val(), that.attr("class"))
             if (that.val() === "") {
                 that.addClass("OxPlaceholder").val(that.attr("placeholder"));
             }
+            if (self.options.autocomplete) {
+                $document.unbind("keypress", keypress);
+            }
+        }
+        function focus() {
+            if (that.is(".OxPlaceholder")) {
+                that.val("").removeClass("OxPlaceholder");
+            }
+            if (self.options.autocomplete) {
+                // fixme: different in webkit and firefox (?), see keyboard handler, need generic function
+                $document.bind("keypress", keypress);
+            }
+        }
+        function keypress() {
+            var val = that.val();
+            if (self.options.autocomplete && val != self.options.value) {
+                self.options.value = val;
+                if (val === "") {
+                    self.menu.hideMenu();
+                } else {
+                    self.options.autocomplete(val, autocomplete);
+                }
+            }
         }
         return that;
     };
@@ -2095,34 +2136,7 @@ requires
         that.$content = $("<table>")
             .addClass("OxContent")
             .appendTo(that.$container);
-        $.each(self.options.items, function(i, item) {
+        constructItems(self.options.items);
-            var position;
-            if (item.id) {
-                that.items.push(new Ox.MenuItem($.extend(item, {
-                    menu: that,
-                    position: position = that.items.length
-                })).data("position", position).appendTo(that.$content)); // fixme: jquery bug when passing {position: position}? does not return the object?;
-                if (item.items) {
-                    that.submenus[item.id] = new Ox.Menu({
-                        element: that.items[position],
-                        id: Ox.toCamelCase(self.options.id + "/" + item.id),
-                        items: item.items,
-                        mainmenu: self.options.mainmenu,
-                        offset: {
-                            left: 0,
-                            top: -4
-                        },
-                        parent: that,
-                        side: "right",
-                        size: self.options.size,
-                    });
-                }
-            } else {
-                that.$content.append(constructSpace());
-                that.$content.append(constructLine());
-                that.$content.append(constructSpace());
-            }
-        });
         that.$scrollbars.down = constructScrollbar("down")
             .appendTo(that.$element);
         that.$bottom = $("<div>")
@@ -2182,6 +2196,40 @@ requires
             }
         }
 
+        function constructItems(items) {
+            that.items = [];
+            that.$content.empty();
+            $.each(items, function(i, item) {
+                var position;
+                if (item.id) {
+                    that.items.push(new Ox.MenuItem($.extend(item, {
+                        menu: that,
+                        position: position = that.items.length
+                    })).data("position", position).appendTo(that.$content)); // fixme: jquery bug when passing {position: position}? does not return the object?;
+                    if (item.items) {
+                        that.submenus[item.id] = new Ox.Menu({
+                            element: that.items[position],
+                            id: Ox.toCamelCase(self.options.id + "/" + item.id),
+                            items: item.items,
+                            mainmenu: self.options.mainmenu,
+                            offset: {
+                                left: 0,
+                                top: -4
+                            },
+                            parent: that,
+                            side: "right",
+                            size: self.options.size,
+                        });
+                    }
+                } else {
+                    that.$content.append(constructSpace());
+                    that.$content.append(constructLine());
+                    that.$content.append(constructSpace());
+                }
+            });
+            
+        }
+
         function constructLine() {
             return $("<tr>").append(
                 $("<td>", {
@@ -2438,7 +2486,9 @@ requires
         }
 
         self.onChange = function(key, value) {
-
+            if (key == "items") {
+                constructItems(value);
+            }
         }
 
         that.addItemAfter = function(item) {

demos/test/index.html

@@ -326,6 +326,19 @@
                         }
                     ]
                 }).addClass("margin").width(96).appendTo(mainPanel);
+                Ox.Input({
+                    id: "auto",
+                    autocomplete: function(value, callback) {
+                        callback([
+                            "Alabama", "Alaska", "Arizona", "California",
+                            "Indiana", "Illinois", "Iowa",
+                            "Kansas", "Kentucky",
+                            "Michigan", "New York",
+                            "Tennessee"
+                        ]);
+                    },
+                    placeholder: "State"
+                }).addClass("margin").width(96).appendTo(mainPanel);
                 //*/
                 function switchTheme() {
                     if (Ox.theme() == "classic") {