From 1037fa5e5c1484f8187ffc5c1335446a86f066e3 Mon Sep 17 00:00:00 2001 From: Rolux Date: Thu, 18 Feb 2010 19:54:17 +0530 Subject: [PATCH] autocomplete, continued --- build/js/ox.ui.js | 127 ++++++++++++++++++++++++------------------ demos/test/index.html | 16 ++++-- 2 files changed, 83 insertions(+), 60 deletions(-) diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index c6b637a..10b55f0 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -484,6 +484,7 @@ requires bufferTime = time; } Ox.Event.trigger("key_" + key); + //return false; /* $.each(stack, function(i, v) { // fixme: we dont get the return value! @@ -1563,6 +1564,9 @@ requires }, size: self.options.size }); + self.value = "", + that.bindEvent("click_" + self.menuId, onClick); + that.bindEvent("deselect_" + self.menuId, onDeselect); that.bindEvent("select_" + self.menuId, onSelect); } if (options.type != "textarea") { @@ -1579,10 +1583,10 @@ requires }; }); self.menu.options({ - items: items, - selected: 0 + items: items }).showMenu(); } else { + Ox.print("hiding") self.menu.hideMenu(); } } @@ -1594,35 +1598,22 @@ requires that.addClass("OxPlaceholder").val(that.attr("placeholder")); } if (self.options.autocomplete) { + $document.unbind("keydown", keypress); $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"); } if (self.options.autocomplete) { // fixme: different in webkit and firefox (?), see keyboard handler, need generic function + $document.bind("keydown", keypress); $document.bind("keypress", keypress); + self.options.autocomplete(that.val(), autocomplete); } } - function keypress() { + function keypress(event) { setTimeout(function() { var val = that.val(); if (self.options.autocomplete && val != self.options.value) { @@ -1635,25 +1626,29 @@ requires } }, 50); } - function onSelect(event, data) { - var position = that.val().length; + function onClick(event, data) { + Ox.print("onClick", data) that.val(data.title); - cursor(position); - selectCharacters(position, data.title.length); + self.menu.hideMenu(); } - 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 (self.element.setSelectionRange) { + function onDeselect(event, data) { + that.val(""); + } + function onSelect(event, data) { + self.value = that.val().substr(0, selection()[0]); + var position = self.value.length; + that.val(data.title); + selection(position); + self.element.setSelectionRange(position, data.title.length); + } + function selection() { + var start, end; + if (arguments.length == 0) { + return [self.element.selectionStart, self.element.selectionEnd]; + } else { + start = arguments[0]; + end = arguments[1] || start; self.element.setSelectionRange(start, end); - } else if (self.element.selectionStart) { - self.element.selectionStart = start; - self.element.selectionEnd = end; } } return that; @@ -2135,8 +2130,10 @@ requires events: change_groupId {id, value} checked item of a group has changed click_itemId item not belonging to a group was clicked + click_menuId {id, value} item not belonging to a group was clicked + deselect_menuId {id, value} item was deselected hide_menuId menu was hidden - select_itemId item was selected + select_menuId {id, value} item was selected */ @@ -2165,8 +2162,9 @@ requires .mouseenter(mouseenter) .mouseleave(mouseleave) .mousemove(mousemove), + hiding = false, itemHeight = self.options.size == "small" ? 12 : (self.options.size == "medium" ? 16 : 20), - menuHeight, + // menuHeight, scrollSpeed = 1, $item; // fixme: used? // fixme: attach all private vars to self? @@ -2228,6 +2226,10 @@ requires value: item.options("title")[0] // fixme: value or title? }); } else { + Ox.Event.trigger("click_" + self.options.id, { + id: item.options("id"), + title: item.options("title")[0] + }); Ox.Event.trigger("click_" + item.options("id")); } if (item.options("title").length == 2) { @@ -2249,6 +2251,7 @@ requires function constructItems(items) { that.items = []; that.$content.empty(); + scrollMenuUp(); $.each(items, function(i, item) { var position; if (item.id) { @@ -2277,7 +2280,11 @@ requires that.$content.append(constructSpace()); } }); - + if (!that.is(":hidden")) { + Ox.print("hide&show") + that.hideMenu(); + that.showMenu(); + } } function constructLine() { @@ -2428,9 +2435,15 @@ requires function selectItem(position) { var item; - Ox.print("selectItem", position) if (self.options.selected > -1) { - that.items[self.options.selected].removeClass("OxSelected"); + item = that.items[self.options.selected] + item.removeClass("OxSelected"); + if (!hiding) { + that.triggerEvent("deselect", { + id: item.options("id"), + title: item.options("title")[0] // fixme: value or title? + }); + } } if (position > -1) { item = that.items[position]; @@ -2442,11 +2455,11 @@ requires }); item.options("items").length && that.submenus[item.options("id")].showMenu(); // fixme: do we want to switch to this style? item.addClass("OxSelected"); + that.triggerEvent("select", { + id: item.options("id"), + title: item.options("title")[0] // fixme: value or title? + }); } - that.triggerEvent("select", { - id: item.options("id"), - title: item.options("title")[0] // fixme: value or title? - }); self.options.selected = position; } @@ -2574,8 +2587,13 @@ requires return false; } }); + hiding = true; selectItem(-1); + hiding = false; scrollMenuUp(); + that.$scrollbars.up.is(":visible") && that.$scrollbars.up.hide(); + that.$scrollbars.down.is(":visible") && that.$scrollbars.down.hide(); + //that.$scrollbars.down.hide(); if (self.options.parent) { self.options.element.removeClass("OxSelected"); } @@ -2615,23 +2633,24 @@ requires height = self.options.element.outerHeight(), left = offset.left + self.options.offset.left + (self.options.side == "bottom" ? 0 : width), top = offset.top + self.options.offset.top + (self.options.side == "bottom" ? height : 0), - maxHeight = Math.floor($window.height() - top - 16); - menuHeight = menuHeight || that.outerHeight(); - Ox.print("menuHeight", menuHeight, "maxHeight", maxHeight); + menuHeight = that.$content.outerHeight(); + menuMaxHeight = Math.floor($window.height() - top - 16), + Ox.print("menuHeight", menuHeight, "menuMaxHeight", menuMaxHeight); if (self.options.parent) { - if (menuHeight > maxHeight) { - top = Ox.limit(top - menuHeight + maxHeight, self.options.parent.offset().top, top); - maxHeight = Math.floor($window.height() - top - 16); + if (menuHeight > menuMaxHeight) { + top = Ox.limit(top - menuHeight + menuMaxHeight, self.options.parent.offset().top, top); + menuMaxHeight = Math.floor($window.height() - top - 16); } } that.css({ left: left + "px", top: top + "px" }).show(); - if (menuHeight > maxHeight) { - Ox.print(maxHeight - itemHeight); - that.$container.height(maxHeight - itemHeight - 8); // margin + if (menuHeight > menuMaxHeight) { + that.$container.height(menuMaxHeight - itemHeight - 8); // margin that.$scrollbars.down.show(); + } else { + that.$container.height(menuHeight); } if (!self.options.parent) { that.gainFocus(); @@ -2728,7 +2747,7 @@ requires ); function parseKeyboard(str) { - var modifiers = str.split(' '), + var modifiers = str.split(" "), key = modifiers.pop(); return { modifiers: modifiers, diff --git a/demos/test/index.html b/demos/test/index.html index 5afe429..8f9f1eb 100644 --- a/demos/test/index.html +++ b/demos/test/index.html @@ -343,12 +343,16 @@ "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virgina", "Wisconsin", "Wyoming" - ], - $.each(states, function(i, state) { - if (Ox.startsWith(state.toLowerCase(), value)) { - items.push(state); - } - }); + ]; + if (value === "") { + items = states; + } else { + $.each(states, function(i, state) { + if (state.toLowerCase().indexOf(value) > -1) { + items.push(state); + } + }); + } callback(items); }, placeholder: "State"