From ee72de222ef8342acc7e0b8c43b51a6d45f1a691 Mon Sep 17 00:00:00 2001 From: Rolux Date: Thu, 18 Feb 2010 12:57:32 +0530 Subject: [PATCH] first steps towards autocomplete --- build/js/ox.ui.js | 170 +++++++++++++++++++++++++++--------------- demos/test/index.html | 13 ++++ 2 files changed, 123 insertions(+), 60 deletions(-) diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 3ffba0f..e5f9b53 100644 --- a/build/js/ox.ui.js +++ b/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)) - .css(dimensions[0], "100%") + that.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 || {}); - if(options.type != 'textarea') { - that.attr({type: self.options.type}) + .options(options || {}) + .attr({ + 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 = $("") .addClass("OxContent") .appendTo(that.$container); - $.each(self.options.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()); - } - }); + constructItems(self.options.items); that.$scrollbars.down = constructScrollbar("down") .appendTo(that.$element); that.$bottom = $("
") @@ -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 $("
").append( $("
", { @@ -2438,7 +2486,9 @@ requires } self.onChange = function(key, value) { - + if (key == "items") { + constructItems(value); + } } that.addItemAfter = function(item) { diff --git a/demos/test/index.html b/demos/test/index.html index fbbfd83..8244647 100644 --- a/demos/test/index.html +++ b/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") {