Estou enfrentando um problema com a última checkbox de combinação jQuery. O caso de uso é descrito abaixo.
Um vídeo ilustrando este problema pode ser encontrado aqui: http://screencast.com/t/QLUtZYsL2
Isso é o que eu estou querendo no caso de uso acima: Eu quero ter certeza de que no caso do usuário de alguma forma excluir o texto da checkbox de combinação, em seguida, deixando a checkbox de combinação, o texto é restaurado para o texto do item selecionado.
Exemplo de página html com jQuery combobox é como abaixo.
jQuery UI Example Page .ui-combobox { position: relative; display: inline-block; } .ui-combobox-toggle { position: absolute; top: 0; bottom: 0; margin-left: -1px; padding: 0; /* adjust styles for IE 6/7 */ *height: 1.7em; *top: 0.1em; } .ui-combobox-input { margin: 0; padding: 0.3em; } (function ($) { $.widget("ui.combobox", { _create: function () { var input, self = this, select = this.element.hide(), selected = select.children(":selected"), value = selected.val() ? selected.text() : "", wrapper = this.wrapper = $("") .addClass("ui-combobox") .insertAfter(select); input = $("") .appendTo(wrapper) .val(value) .addClass("ui-state-default ui-combobox-input") .autocomplete({ delay: 0, minLength: 0, source: function (request, response) { var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); response(select.children("option").map(function () { var text = $(this).text(); if (this.value && (!request.term || matcher.test(text))) return { label: text.replace( new RegExp( "(?![^&;]+;)(?!<[^]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^]*>)(?![^&;]+;)", "gi" ), "$1"), value: text, option: this }; })); }, select: function (event, ui) { ui.item.option.selected = true; self._trigger("selected", event, { item: ui.item.option }); }, 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; return false; } }); if (!valid) { // remove invalid value, as it didn't match anything $(this).val(""); select.val(""); input.data("autocomplete").term = ""; return false; } } } }) .addClass("ui-widget ui-widget-content ui-corner-left"); input.data("autocomplete")._renderItem = function (ul, item) { return $("") .data("item.autocomplete", item) .append("" + item.label + "") .appendTo(ul); }; $("") .attr("tabIndex", -1) .attr("title", "Show All Items") .appendTo(wrapper) .button({ icons: { primary: "ui-icon-triangle-1-s" }, text: false }) .removeClass("ui-corner-all") .addClass("ui-corner-right ui-combobox-toggle") .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(); }); }, destroy: function () { this.wrapper.remove(); this.element.show(); $.Widget.prototype.destroy.call(this); } }); })(jQuery); $(function () { $("#combobox").combobox(); $("#toggle").click(function () { $("#combobox").toggle(); }); });
Você pode aproveitar o evento de alteração para armazenar em cache o texto e o valor atualmente selecionados e, em seguida, usar os events de foco ou desfoque para garantir que o texto não permaneça em branco quando você sair. Se você puder postar um exemplo de código, posso modificá-lo para mostrar o que estou falando.
Eu finalmente encontrei uma saída, mas deixe-me começar com algumas críticas construtivas. jQuery é como ROCKET SCIENCE. RI MUITO. O jQuery não possui um modelo de evento intuitivo e, nessa área, o javascript vence o jQuery. Passei muitas horas tentando triggersr o evento change ou blur ou focusout na checkbox de combinação jQuery, mas sem sucesso algum. Então, a melhor solução para resolver o problema que mencionei no meu post inicial, é seguir qualquer uma das duas abordagens dadas abaixo.
Anexe o evento blur ou focusout ao pai da checkbox de combinação jQuery. Por exemplo, um div pode ser o pai, pois tem a checkbox de combinação jQuery dentro dele. Veja o código abaixo.
$(document).ready(function () { $("#dropdown_sel").combobox(); $($('.ui-combobox-input')[0]).css('width', '500px'); $("#toggle").click(function () { $("#dropdown_sel").toggle(); }); //line below attaches the focusout event $('#dropdown_sel').parent().bind('focusout', function () { if ($.trim($('#dropdown_sel option:selected').val()) != '') { $('#dropdown_sel').next().find('input').val($('#dropdown_sel option:selected').text()); } }); });
Ou anexe o evento blur ou focusout ao elemento de input da checkbox de combinação jQuery. Veja o código abaixo.
$(document).ready(function () { $("#dropdown_sel").combobox(); $($('.ui-combobox-input')[0]).css('width', '500px'); $("#toggle").click(function () { $("#dropdown_sel").toggle(); }); //line below attaches the focusout event $('#dropdown_sel').next().find('input').bind('focusout', function () { if ($.trim($('#dropdown_sel option:selected').val()) != '') { $('#dropdown_sel').next().find('input').val($('#dropdown_sel option:selected').text()); } }); });
Se você estiver selecionando a primeira opção por padrão para avisar o usuário, o código para append o evento focusout será alterado para abaixo. Uma outra parte é adicionada à lógica do evento, na qual o texto do elemento de input é definido para o texto da primeira opção.
$('#dropdown_sel').next().find('input').bind('focusout', function () { if ($.trim($('#dropdown_sel option:selected').val()) != '') { $('#dropdown_sel').next().find('input').val($('#dropdown_sel option:selected').text()); } else { $('#dropdown_sel').next().find('input').val($('#dropdown_sel option:first').text()); } });