From 441e1ced33310860dccc828c97b1d04ee42e9756 Mon Sep 17 00:00:00 2001 From: Rolux Date: Thu, 18 Feb 2010 14:41:47 +0530 Subject: [PATCH] autocomplete, continued --- build/js/ox.ui.js | 62 +++++++++++++++++++++++++++++++++++------------ 1 file changed, 46 insertions(+), 16 deletions(-) diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index f295c40..c6b637a 100644 --- a/build/js/ox.ui.js +++ b/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); } }