autocomplete, continued
This commit is contained in:
Rolux
parent
bf73d4f181
commit
966359bf99
2 changed files with 83 additions and 60 deletions
|
|
@ -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?
|
||||
});
|
||||
}
|
||||
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,
|
||||
|
|
|
|||
|
|
@ -343,12 +343,16 @@
|
|||
"South Carolina", "South Dakota", "Tennessee", "Texas", "Utah",
|
||||
"Vermont", "Virginia", "Washington", "West Virgina", "Wisconsin",
|
||||
"Wyoming"
|
||||
],
|
||||
];
|
||||
if (value === "") {
|
||||
items = states;
|
||||
} else {
|
||||
$.each(states, function(i, state) {
|
||||
if (Ox.startsWith(state.toLowerCase(), value)) {
|
||||
if (state.toLowerCase().indexOf(value) > -1) {
|
||||
items.push(state);
|
||||
}
|
||||
});
|
||||
}
|
||||
callback(items);
|
||||
},
|
||||
placeholder: "State"
|
||||
|
|
|
|||
Loading…
Reference in a new issue