i'm working on combox.ui which was earlier changed by one of my senior. He changed js file according to our project's needs.But my need is now whenever someone focus on dropdown --Select -- should be removed from list and autocomplete search should start and whenever focus is out of dropdown or input --Select-- should be added at its place. Please tell me where i'm doing wrong and where this function should be written. I've no idea where to write this function in this plugin code..
(function ($) {
$.widget("ui.combobox", {
options: {
maxOptionSize: 20,
maxOptionText: "... type to filter"
},
_create: function () {
var self = this,
select = this.element.hide(),
selected = select.children(":selected"),
maxOptionValue = select.children().eq(0).val(),
value = selected.val() ? selected.text() : "";
select.wrap("<div style='float:left;'></div>");
var width = $(select).width();
if (width == 0)
width = 100;
if (this.element.attr('disabled') == 'disabled') {/*To handle disabled case */
input = this.input = $("<input type='textbox'>").addClass("textbox").attr("disabled", "disabled").insertAfter(select).val(value).attr("title", value);
return; /*Do not render autocomplete*/
}
var input = this.input = $("<input>").insertAfter(select).val(value).attr("title", value).autocomplete({
delay: 0,
minLength: 0,
source: function (request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
var select_el = select.get(0); // get dom element
var rep = new Array(); // response array
input.data("autocomplete").showMaxOption = false;
// simple loop for the options
for (var i = 0; i < select_el.length; i++) {
var text = select_el.options[i].text;
// add element to result array
if (select_el.options[i].value && (!request.term || matcher.test(text))) {
rep.push({
label: text, //.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
value: text,
option: select_el.options[i],
number: i + 1
});
}
if (rep.length == self.options.maxOptionSize) {
input.data("autocomplete").showMaxOption = true;
input.data("autocomplete").maxOptionText = self.options.maxOptionText;
break;
}
}
// send response
response(rep);
},
select: function (event, ui) {
if (ui.item.value == maxOptionValue) {
input.data("autocomplete").term = "";
var selValue = select.find("option:selected").text();
$(this).val(selValue).attr("title", selValue);
return false;
} else {
ui.item.option.selected = true;
self._trigger("selected", event, {
item: ui.item.option
});
}
},
focus: function (event, ui) {
if (ui.item.value == maxOptionValue) {
return false;
}
},
change: function (event, ui) {
if (!ui.item) {
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
valid = false;
select.children("option").each(function () {
if ($(this).text().match(matcher)) {
this.selected = valid = true;
select.change();
return false;
}
});
if (!valid) {
input.data("autocomplete").term = "";
var selValue = select.find("option:selected").text();
$(this).val(selValue).attr("title", selValue);
return false;
}
} else {
var selValue = select.find("option:selected").text();
$(this).attr("title", selValue);
}
},
close: function (event, ui) {
if (event.originalEvent && event.originalEvent.type === "menuselected") {
$(select).change();
}
}
}).addClass("ui-widget ui-widget-content ui-corner-left").width(width);
input.data("autocomplete")._renderItem = function (ul, item) {
return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "</a>").appendTo(ul);
};
this.button = $("<button type='button'> </button>").attr("tabIndex", -1).attr("title", "Show Items").insertAfter(input).button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
}).removeClass("ui-corner-all").addClass("ui-corner-right ui-button-icon").click(function () {
// close if already visible
if (input.autocomplete("widget").is(":visible")) {
input.autocomplete("close");
return;
}
// work around a bug (likely same cause as #5265)
$(this).blur();
// pass empty string as value to search for, displaying all results
input.autocomplete("search", "");
input.focus();
});
var iw = input.outerWidth(true);
var bw = this.button.outerWidth(true);
select.parent().width(iw + bw + 1);
},
destroy: function () {
this.input.remove();
this.button.remove();
this.element.show();
$.Widget.prototype.destroy.call(this);
}
});
})(jQuery);
(function ($) {
$.extend($.ui.autocomplete.prototype, {
_renderMenu: function (ul, items) {
var self = this;
$.each(items, function (index, item) {
if (index < items.length)
self._renderItem(ul, item);
});
if (self.element.data("autocomplete").showMaxOption) {
ul.append("<li class='ui-autocomplete-max-option'>" + self.element.data("autocomplete").maxOptionText + "</li>");
}
}
});
})(jQuery);