0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

autocomplete, continued

Browse source
This commit is contained in:
Rolux 2010-02-18 19:54:17 +05:30
parent bf73d4f181
commit 966359bf99
2 changed files with 83 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

121
build/js/ox.ui.js
View file

@ -484,6 +484,7 @@ requires
bufferTime = time; bufferTime = time;
} }
Ox.Event.trigger("key_" + key); Ox.Event.trigger("key_" + key);
//return false;
/* /*
$.each(stack, function(i, v) { $.each(stack, function(i, v) {
// fixme: we dont get the return value! // fixme: we dont get the return value!
@ -1563,6 +1564,9 @@ requires
}, },
size: self.options.size size: self.options.size
}); });
self.value = "",
that.bindEvent("click_" + self.menuId, onClick);
that.bindEvent("deselect_" + self.menuId, onDeselect);
that.bindEvent("select_" + self.menuId, onSelect); that.bindEvent("select_" + self.menuId, onSelect);
} }
if (options.type != "textarea") { if (options.type != "textarea") {
@ -1579,10 +1583,10 @@ requires
}; };
}); });
self.menu.options({ self.menu.options({
items: items, items: items
selected: 0
}).showMenu(); }).showMenu();
} else { } else {
Ox.print("hiding")
self.menu.hideMenu(); self.menu.hideMenu();
} }
} }
@ -1594,35 +1598,22 @@ requires
that.addClass("OxPlaceholder").val(that.attr("placeholder")); that.addClass("OxPlaceholder").val(that.attr("placeholder"));
} }
if (self.options.autocomplete) { if (self.options.autocomplete) {
$document.unbind("keydown", keypress);
$document.unbind("keypress", 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() { function focus() {
if (that.is(".OxPlaceholder")) { if (that.is(".OxPlaceholder")) {
that.val("").removeClass("OxPlaceholder"); that.val("").removeClass("OxPlaceholder");
} }
if (self.options.autocomplete) { if (self.options.autocomplete) {
// fixme: different in webkit and firefox (?), see keyboard handler, need generic function // fixme: different in webkit and firefox (?), see keyboard handler, need generic function
$document.bind("keydown", keypress);
$document.bind("keypress", keypress); $document.bind("keypress", keypress);
self.options.autocomplete(that.val(), autocomplete);
} }
} }
function keypress() { function keypress(event) {
setTimeout(function() { setTimeout(function() {
var val = that.val(); var val = that.val();
if (self.options.autocomplete && val != self.options.value) { if (self.options.autocomplete && val != self.options.value) {
@ -1635,25 +1626,29 @@ requires
} }
}, 50); }, 50);
} }
function onSelect(event, data) { function onClick(event, data) {
var position = that.val().length; Ox.print("onClick", data)
that.val(data.title); that.val(data.title);
cursor(position); self.menu.hideMenu();
selectCharacters(position, data.title.length);
} }
function selectCharacters(start, end) { function onDeselect(event, data) {
var range; that.val("");
if (self.element.createTextRange) { }
range = self.element.createTextRange(); function onSelect(event, data) {
range.collapse(true); self.value = that.val().substr(0, selection()[0]);
range.moveStart("character", start); var position = self.value.length;
range.moveEnd("character", end); that.val(data.title);
range.select(); selection(position);
} else if (self.element.setSelectionRange) { 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); self.element.setSelectionRange(start, end);
} else if (self.element.selectionStart) {
self.element.selectionStart = start;
self.element.selectionEnd = end;
} }
} }
return that; return that;
@ -2135,8 +2130,10 @@ requires
events: events:
change_groupId {id, value} checked item of a group has changed change_groupId {id, value} checked item of a group has changed
click_itemId item not belonging to a group was clicked 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 hide_menuId menu was hidden
select_itemId item was selected select_menuId {id, value} item was selected
*/ */
@ -2165,8 +2162,9 @@ requires
.mouseenter(mouseenter) .mouseenter(mouseenter)
.mouseleave(mouseleave) .mouseleave(mouseleave)
.mousemove(mousemove), .mousemove(mousemove),
hiding = false,
itemHeight = self.options.size == "small" ? 12 : (self.options.size == "medium" ? 16 : 20), itemHeight = self.options.size == "small" ? 12 : (self.options.size == "medium" ? 16 : 20),
menuHeight, // menuHeight,
scrollSpeed = 1, scrollSpeed = 1,
$item; // fixme: used? $item; // fixme: used?
// fixme: attach all private vars to self? // fixme: attach all private vars to self?
@ -2228,6 +2226,10 @@ requires
value: item.options("title")[0] // fixme: value or title? value: item.options("title")[0] // fixme: value or title?
}); });
} else { } else {
Ox.Event.trigger("click_" + self.options.id, {
id: item.options("id"),
title: item.options("title")[0]
});
Ox.Event.trigger("click_" + item.options("id")); Ox.Event.trigger("click_" + item.options("id"));
} }
if (item.options("title").length == 2) { if (item.options("title").length == 2) {
@ -2249,6 +2251,7 @@ requires
function constructItems(items) { function constructItems(items) {
that.items = []; that.items = [];
that.$content.empty(); that.$content.empty();
scrollMenuUp();
$.each(items, function(i, item) { $.each(items, function(i, item) {
var position; var position;
if (item.id) { if (item.id) {
@ -2277,7 +2280,11 @@ requires
that.$content.append(constructSpace()); that.$content.append(constructSpace());
} }
}); });
if (!that.is(":hidden")) {
Ox.print("hide&show")
that.hideMenu();
that.showMenu();
}
} }
function constructLine() { function constructLine() {
@ -2428,9 +2435,15 @@ requires
function selectItem(position) { function selectItem(position) {
var item; var item;
Ox.print("selectItem", position)
if (self.options.selected > -1) { 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) { if (position > -1) {
item = that.items[position]; 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.options("items").length && that.submenus[item.options("id")].showMenu(); // fixme: do we want to switch to this style?
item.addClass("OxSelected"); item.addClass("OxSelected");
}
that.triggerEvent("select", { that.triggerEvent("select", {
id: item.options("id"), id: item.options("id"),
title: item.options("title")[0] // fixme: value or title? title: item.options("title")[0] // fixme: value or title?
}); });
}
self.options.selected = position; self.options.selected = position;
} }
@ -2574,8 +2587,13 @@ requires
return false; return false;
} }
}); });
hiding = true;
selectItem(-1); selectItem(-1);
hiding = false;
scrollMenuUp(); 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) { if (self.options.parent) {
self.options.element.removeClass("OxSelected"); self.options.element.removeClass("OxSelected");
} }
@ -2615,23 +2633,24 @@ requires
height = self.options.element.outerHeight(), height = self.options.element.outerHeight(),
left = offset.left + self.options.offset.left + (self.options.side == "bottom" ? 0 : width), 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), top = offset.top + self.options.offset.top + (self.options.side == "bottom" ? height : 0),
maxHeight = Math.floor($window.height() - top - 16); menuHeight = that.$content.outerHeight();
menuHeight = menuHeight || that.outerHeight(); menuMaxHeight = Math.floor($window.height() - top - 16),
Ox.print("menuHeight", menuHeight, "maxHeight", maxHeight); Ox.print("menuHeight", menuHeight, "menuMaxHeight", menuMaxHeight);
if (self.options.parent) { if (self.options.parent) {
if (menuHeight > maxHeight) { if (menuHeight > menuMaxHeight) {
top = Ox.limit(top - menuHeight + maxHeight, self.options.parent.offset().top, top); top = Ox.limit(top - menuHeight + menuMaxHeight, self.options.parent.offset().top, top);
maxHeight = Math.floor($window.height() - top - 16); menuMaxHeight = Math.floor($window.height() - top - 16);
} }
} }
that.css({ that.css({
left: left + "px", left: left + "px",
top: top + "px" top: top + "px"
}).show(); }).show();
if (menuHeight > maxHeight) { if (menuHeight > menuMaxHeight) {
Ox.print(maxHeight - itemHeight); that.$container.height(menuMaxHeight - itemHeight - 8); // margin
that.$container.height(maxHeight - itemHeight - 8); // margin
that.$scrollbars.down.show(); that.$scrollbars.down.show();
} else {
that.$container.height(menuHeight);
} }
if (!self.options.parent) { if (!self.options.parent) {
that.gainFocus(); that.gainFocus();
@ -2728,7 +2747,7 @@ requires
); );
function parseKeyboard(str) { function parseKeyboard(str) {
var modifiers = str.split(' '), var modifiers = str.split(" "),
key = modifiers.pop(); key = modifiers.pop();
return { return {
modifiers: modifiers, modifiers: modifiers,

8
demos/test/index.html
View file

@ -343,12 +343,16 @@
"South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah",
"Vermont", "Virginia", "Washington", "West Virgina", "Wisconsin", "Vermont", "Virginia", "Washington", "West Virgina", "Wisconsin",
"Wyoming" "Wyoming"
], ];
if (value === "") {
items = states;
} else {
$.each(states, function(i, state) { $.each(states, function(i, state) {
if (Ox.startsWith(state.toLowerCase(), value)) { if (state.toLowerCase().indexOf(value) > -1) {
items.push(state); items.push(state);
} }
}); });
}
callback(items); callback(items);
}, },
placeholder: "State" placeholder: "State"