diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index e5f9b535..f295c405 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -1566,15 +1566,20 @@ requires }); } 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(); + if (items.length) { + 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.val(self.menu.options("items")[0].title); + } else { + self.menu.hideMenu(); + } } function change() { @@ -1597,14 +1602,32 @@ requires } } 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); + setTimeout(function() { + 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); + } } + }, 50); + } + function select(start, end) { + var element = that.$element[0], + range; + if (element.createTextRange) { + range = element.createTextRange(); + range.collapse(true); + range.moveStart("character", start); + range.moveEnd("character", end); + range.select(); + } else if (element.setSelectionRange) { + element.setSelectionRange(start, end); + } else if (element.selectionStart) { + element.selectionStart = start; + element.selectionEnd = end; } } return that; diff --git a/demos/test/index.html b/demos/test/index.html index 82446470..5afe429b 100644 --- a/demos/test/index.html +++ b/demos/test/index.html @@ -327,15 +327,29 @@ ] }).addClass("margin").width(96).appendTo(mainPanel); Ox.Input({ - id: "auto", + id: "state", autocomplete: function(value, callback) { - callback([ - "Alabama", "Alaska", "Arizona", "California", - "Indiana", "Illinois", "Iowa", - "Kansas", "Kentucky", - "Michigan", "New York", - "Tennessee" - ]); + value = value.toLowerCase(); + var items = []; + states = [ + "Alabama", "Alaska", "Arizona", "Arkansas", "California", + "Colorado", "Connecticut", "Delaware", "District of Columbia", "Florida", + "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", + "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", + "Maryland", "Massachusetts", "Michigan", "Minnessota", "Mississippi", + "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", + "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", + "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", + "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); + } + }); + callback(items); }, placeholder: "State" }).addClass("margin").width(96).appendTo(mainPanel);