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

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

@ -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,

16
demos/test/index.html
View file

@ -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"