first steps towards autocomplete
This commit is contained in:
Rolux
parent
13be1d9a10
commit
301a9759db
2 changed files with 123 additions and 60 deletions
|
|
@ -455,12 +455,12 @@ requires
|
|||
$(function() {
|
||||
// fixme: how to do this better?
|
||||
if ($.browser.safari) {
|
||||
$document.keydown(keydown);
|
||||
$document.keydown(keypress);
|
||||
} else {
|
||||
$document.keypress(keydown);
|
||||
$document.keypress(keypress);
|
||||
}
|
||||
});
|
||||
function keydown(event) {
|
||||
function keypress(event) {
|
||||
var key,
|
||||
keys = [],
|
||||
ret = true,
|
||||
|
|
@ -1153,10 +1153,10 @@ requires
|
|||
orientation: "horizontal",
|
||||
size: 16
|
||||
})
|
||||
.options(options || {}),
|
||||
.options(options || {})
|
||||
.addClass("OxBar Ox" + Ox.toTitleCase(self.options.orientation)),
|
||||
dimensions = oxui.getDimensions(self.options.orientation);
|
||||
that.addClass("OxBar Ox" + Ox.toTitleCase(self.options.orientation))
|
||||
.css(dimensions[0], "100%")
|
||||
that.css(dimensions[0], "100%")
|
||||
.css(dimensions[1], self.options.size + "px");
|
||||
return that;
|
||||
};
|
||||
|
|
@ -1208,6 +1208,8 @@ requires
|
|||
*/
|
||||
|
||||
Ox.Dialog = function(options, self) {
|
||||
// fixme: this was just pasted from previous version ... update
|
||||
// fixme: dialog should be derived from a generic draggable
|
||||
var self = self || {},
|
||||
options = $.extend({
|
||||
title: "",
|
||||
|
|
@ -1528,43 +1530,82 @@ requires
|
|||
|
||||
Ox.Input = function(options, self) {
|
||||
var self = self || {},
|
||||
that = new Ox.Element(options.type=='textarea'?'textarea':'input', self)
|
||||
that = new Ox.Element(
|
||||
options.type == "textarea" ? "textarea" : "input", self
|
||||
)
|
||||
.defaults({
|
||||
autocomplete: null,
|
||||
placeholder: "",
|
||||
size: "medium",
|
||||
type: "text"
|
||||
})
|
||||
.options(options || {});
|
||||
if(options.type != 'textarea') {
|
||||
that.attr({type: self.options.type})
|
||||
.options(options || {})
|
||||
.attr({
|
||||
placeholder: self.options.placeholder
|
||||
})
|
||||
.addClass(
|
||||
"OxInput Ox" + Ox.toTitleCase(self.options.size) +
|
||||
" OxPlaceholder"
|
||||
)
|
||||
.focus(focus)
|
||||
.blur(blur)
|
||||
.change(change);
|
||||
if (options.autocomplete) {
|
||||
self.menu = new Ox.Menu({
|
||||
element: that,
|
||||
offset: {
|
||||
left: 4,
|
||||
top: 0
|
||||
},
|
||||
size: self.options.size
|
||||
});
|
||||
}
|
||||
if (options.type != "textarea") {
|
||||
that.attr({
|
||||
type: self.options.type
|
||||
});
|
||||
}
|
||||
function autocomplete(items) {
|
||||
items = $.map(items, function(title) {
|
||||
return {
|
||||
id: title.toLowerCase(), // fixme: need function to do lowercase, underscores etc?
|
||||
title: title
|
||||
}
|
||||
});
|
||||
self.menu.options({
|
||||
items: items
|
||||
}).showMenu();
|
||||
}
|
||||
that.attr({
|
||||
placeholder: self.options.placeholder
|
||||
})
|
||||
.addClass("OxInput Ox" +
|
||||
Ox.toTitleCase(self.options.size) + " OxPlaceholder")
|
||||
//.change(change)
|
||||
.focus(focus)
|
||||
.blur(blur);
|
||||
/* doesn't work yet
|
||||
function change() {
|
||||
Ox.print("change", that.val(), that.hasClass("OxPlaceholder"))
|
||||
if ((that.val() !== "") != that.hasClass("OxPlaceholder")) {
|
||||
that.toggleClass("OxPlaceholder");
|
||||
}
|
||||
}
|
||||
*/
|
||||
function focus() {
|
||||
Ox.print("focus", that.val(), that.attr("class"))
|
||||
if (that.hasClass("OxPlaceholder")) {
|
||||
that.val("").removeClass("OxPlaceholder");
|
||||
}
|
||||
|
||||
}
|
||||
function blur() {
|
||||
Ox.print("blur", that.val(), that.attr("class"))
|
||||
if (that.val() === "") {
|
||||
that.addClass("OxPlaceholder").val(that.attr("placeholder"));
|
||||
}
|
||||
if (self.options.autocomplete) {
|
||||
$document.unbind("keypress", keypress);
|
||||
}
|
||||
}
|
||||
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("keypress", keypress);
|
||||
}
|
||||
}
|
||||
function keypress() {
|
||||
var val = that.val();
|
||||
if (self.options.autocomplete && val != self.options.value) {
|
||||
self.options.value = val;
|
||||
if (val === "") {
|
||||
self.menu.hideMenu();
|
||||
} else {
|
||||
self.options.autocomplete(val, autocomplete);
|
||||
}
|
||||
}
|
||||
}
|
||||
return that;
|
||||
};
|
||||
|
|
@ -2095,34 +2136,7 @@ requires
|
|||
that.$content = $("<table>")
|
||||
.addClass("OxContent")
|
||||
.appendTo(that.$container);
|
||||
$.each(self.options.items, function(i, item) {
|
||||
var position;
|
||||
if (item.id) {
|
||||
that.items.push(new Ox.MenuItem($.extend(item, {
|
||||
menu: that,
|
||||
position: position = that.items.length
|
||||
})).data("position", position).appendTo(that.$content)); // fixme: jquery bug when passing {position: position}? does not return the object?;
|
||||
if (item.items) {
|
||||
that.submenus[item.id] = new Ox.Menu({
|
||||
element: that.items[position],
|
||||
id: Ox.toCamelCase(self.options.id + "/" + item.id),
|
||||
items: item.items,
|
||||
mainmenu: self.options.mainmenu,
|
||||
offset: {
|
||||
left: 0,
|
||||
top: -4
|
||||
},
|
||||
parent: that,
|
||||
side: "right",
|
||||
size: self.options.size,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
that.$content.append(constructSpace());
|
||||
that.$content.append(constructLine());
|
||||
that.$content.append(constructSpace());
|
||||
}
|
||||
});
|
||||
constructItems(self.options.items);
|
||||
that.$scrollbars.down = constructScrollbar("down")
|
||||
.appendTo(that.$element);
|
||||
that.$bottom = $("<div>")
|
||||
|
|
@ -2182,6 +2196,40 @@ requires
|
|||
}
|
||||
}
|
||||
|
||||
function constructItems(items) {
|
||||
that.items = [];
|
||||
that.$content.empty();
|
||||
$.each(items, function(i, item) {
|
||||
var position;
|
||||
if (item.id) {
|
||||
that.items.push(new Ox.MenuItem($.extend(item, {
|
||||
menu: that,
|
||||
position: position = that.items.length
|
||||
})).data("position", position).appendTo(that.$content)); // fixme: jquery bug when passing {position: position}? does not return the object?;
|
||||
if (item.items) {
|
||||
that.submenus[item.id] = new Ox.Menu({
|
||||
element: that.items[position],
|
||||
id: Ox.toCamelCase(self.options.id + "/" + item.id),
|
||||
items: item.items,
|
||||
mainmenu: self.options.mainmenu,
|
||||
offset: {
|
||||
left: 0,
|
||||
top: -4
|
||||
},
|
||||
parent: that,
|
||||
side: "right",
|
||||
size: self.options.size,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
that.$content.append(constructSpace());
|
||||
that.$content.append(constructLine());
|
||||
that.$content.append(constructSpace());
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function constructLine() {
|
||||
return $("<tr>").append(
|
||||
$("<td>", {
|
||||
|
|
@ -2438,7 +2486,9 @@ requires
|
|||
}
|
||||
|
||||
self.onChange = function(key, value) {
|
||||
|
||||
if (key == "items") {
|
||||
constructItems(value);
|
||||
}
|
||||
}
|
||||
|
||||
that.addItemAfter = function(item) {
|
||||
|
|
|
|||
|
|
@ -326,6 +326,19 @@
|
|||
}
|
||||
]
|
||||
}).addClass("margin").width(96).appendTo(mainPanel);
|
||||
Ox.Input({
|
||||
id: "auto",
|
||||
autocomplete: function(value, callback) {
|
||||
callback([
|
||||
"Alabama", "Alaska", "Arizona", "California",
|
||||
"Indiana", "Illinois", "Iowa",
|
||||
"Kansas", "Kentucky",
|
||||
"Michigan", "New York",
|
||||
"Tennessee"
|
||||
]);
|
||||
},
|
||||
placeholder: "State"
|
||||
}).addClass("margin").width(96).appendTo(mainPanel);
|
||||
//*/
|
||||
function switchTheme() {
|
||||
if (Ox.theme() == "classic") {
|
||||
|
|
|
|||
Loading…
Reference in a new issue