autocomplete, continued
This commit is contained in:
parent
2e6f3cd64b
commit
bf73d4f181
1 changed files with 46 additions and 16 deletions
|
@ -1535,6 +1535,7 @@ requires
|
||||||
)
|
)
|
||||||
.defaults({
|
.defaults({
|
||||||
autocomplete: null,
|
autocomplete: null,
|
||||||
|
id: "",
|
||||||
placeholder: "",
|
placeholder: "",
|
||||||
size: "medium",
|
size: "medium",
|
||||||
type: "text"
|
type: "text"
|
||||||
|
@ -1551,14 +1552,18 @@ requires
|
||||||
.blur(blur)
|
.blur(blur)
|
||||||
.change(change);
|
.change(change);
|
||||||
if (options.autocomplete) {
|
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({
|
self.menu = new Ox.Menu({
|
||||||
element: that,
|
element: that,
|
||||||
|
id: self.menuId,
|
||||||
offset: {
|
offset: {
|
||||||
left: 4,
|
left: 4,
|
||||||
top: 0
|
top: 0
|
||||||
},
|
},
|
||||||
size: self.options.size
|
size: self.options.size
|
||||||
});
|
});
|
||||||
|
that.bindEvent("select_" + self.menuId, onSelect);
|
||||||
}
|
}
|
||||||
if (options.type != "textarea") {
|
if (options.type != "textarea") {
|
||||||
that.attr({
|
that.attr({
|
||||||
|
@ -1571,12 +1576,12 @@ requires
|
||||||
return {
|
return {
|
||||||
id: title.toLowerCase(), // fixme: need function to do lowercase, underscores etc?
|
id: title.toLowerCase(), // fixme: need function to do lowercase, underscores etc?
|
||||||
title: title
|
title: title
|
||||||
}
|
};
|
||||||
});
|
});
|
||||||
self.menu.options({
|
self.menu.options({
|
||||||
items: items
|
items: items,
|
||||||
|
selected: 0
|
||||||
}).showMenu();
|
}).showMenu();
|
||||||
that.val(self.menu.options("items")[0].title);
|
|
||||||
} else {
|
} else {
|
||||||
self.menu.hideMenu();
|
self.menu.hideMenu();
|
||||||
}
|
}
|
||||||
|
@ -1592,6 +1597,22 @@ requires
|
||||||
$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");
|
||||||
|
@ -1614,20 +1635,25 @@ requires
|
||||||
}
|
}
|
||||||
}, 50);
|
}, 50);
|
||||||
}
|
}
|
||||||
function select(start, end) {
|
function onSelect(event, data) {
|
||||||
var element = that.$element[0],
|
var position = that.val().length;
|
||||||
range;
|
that.val(data.title);
|
||||||
if (element.createTextRange) {
|
cursor(position);
|
||||||
range = element.createTextRange();
|
selectCharacters(position, data.title.length);
|
||||||
|
}
|
||||||
|
function selectCharacters(start, end) {
|
||||||
|
var range;
|
||||||
|
if (self.element.createTextRange) {
|
||||||
|
range = self.element.createTextRange();
|
||||||
range.collapse(true);
|
range.collapse(true);
|
||||||
range.moveStart("character", start);
|
range.moveStart("character", start);
|
||||||
range.moveEnd("character", end);
|
range.moveEnd("character", end);
|
||||||
range.select();
|
range.select();
|
||||||
} else if (element.setSelectionRange) {
|
} else if (self.element.setSelectionRange) {
|
||||||
element.setSelectionRange(start, end);
|
self.element.setSelectionRange(start, end);
|
||||||
} else if (element.selectionStart) {
|
} else if (self.element.selectionStart) {
|
||||||
element.selectionStart = start;
|
self.element.selectionStart = start;
|
||||||
element.selectionEnd = end;
|
self.element.selectionEnd = end;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return that;
|
return that;
|
||||||
|
@ -2110,6 +2136,7 @@ requires
|
||||||
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
|
||||||
hide_menuId menu was hidden
|
hide_menuId menu was hidden
|
||||||
|
select_itemId item was selected
|
||||||
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
@ -2413,13 +2440,14 @@ requires
|
||||||
return false;
|
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.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.options({
|
that.triggerEvent("select", {
|
||||||
selected: position
|
id: item.options("id"),
|
||||||
|
title: item.options("title")[0] // fixme: value or title?
|
||||||
});
|
});
|
||||||
|
self.options.selected = position;
|
||||||
}
|
}
|
||||||
|
|
||||||
function selectNextItem() {
|
function selectNextItem() {
|
||||||
|
@ -2511,6 +2539,8 @@ requires
|
||||||
self.onChange = function(key, value) {
|
self.onChange = function(key, value) {
|
||||||
if (key == "items") {
|
if (key == "items") {
|
||||||
constructItems(value);
|
constructItems(value);
|
||||||
|
} else if (key == "selected") {
|
||||||
|
selectItem(value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue