JQueryUI - ComboBox Testing
Fiddle to evaluate different Jquery UI combobox
HTML
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<input type="text" class="patientlocation" value="Exam 1" />
<br /><br />
<input type="text" class="patientlocation" value="" />
CSS
body {
padding: 10px
}
.ui-widget {
font-size:12px;
}
.ui-combobox {
position: relative;
display: inline-block;
margin-right:25px;
}
.ui-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
/* support: IE7 */
*height: 1.7em;
*top: 0.1em;
}
.ui-combobox-input {
margin: 0;
padding: 0.3em;
}
.ui-state-default {
font-weight:normal;
}
JavaScript
var patient_location_data = ["Waiting", "Exam 1", "Exam 2", "Exam 3", "Exam 4", "Exam 5", "Exam 6", "Exam 7", "Exam 8", "Exam 9", "Exam 10", "Exam 11", "Exam 12", "Exam 13", "Exam 14", "Exam 15", "Ready to room", "Departed"];
(function ($) {
$.widget("ui.combobox", {
_create: function () {
var wrapper = this.wrapper = $("<span />").addClass("ui-combobox"),
self = this;
this.element.wrap(wrapper);
this.element.addClass("ui-state-default ui-combobox-input ui-widget ui-widget-content ui-corner-left")
.autocomplete($.extend({
minLength: 0
}, this.options));
$("<a />")
.insertAfter(this.element)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass("ui-corner-all")
.addClass("ui-corner-right ui-combobox-toggle")
.click(function () {
if (self.element.autocomplete("widget").is(":visible")) {
self.element.autocomplete("close");
return;
}
$(this).blur();
self.element.autocomplete("search", "");
self.element.focus();
});
},
destroy: function () {
// kill the auto-complete
this.element.autocomplete('destroy');
// kill the button
this.element.next().remove();
// kill the wrapper
this.element.unwrap();
$.Widget.prototype.destroy.call(this);
}
});
})(jQuery);
$(document).ready(function () {
$(".patientlocation").combobox({
source: patient_location_data,
change: function (event, ui) {
var custom_text = (event.currentTarget == null) ? '' : event.currentTarget.value;
...