Restaurar o texto do jQuery combobox para o texto da opção selecionada, caso o texto tenha sido apagado pelo usuário?

Estou enfrentando um problema com a última checkbox de combinação jQuery. O caso de uso é descrito abaixo.

  1. Eu digito algo na checkbox de combinação, que exibe todas as opções correspondentes e seleciono uma das opções correspondentes. Isso define o texto da checkbox de combinação para o texto do item selecionado.
  2. Agora, eu me concentro na checkbox de combinação e, em seguida, volto para a checkbox de combinação e excluo todo o texto, mas não seleciono outro item. A checkbox de combinação está mostrando texto em branco, mesmo que o valor selecionado esteja lá. Isso não parece muito intuitivo para mim, pois um texto em branco deve significar que nenhuma opção está selecionada.

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(); }); });
    Select one... ActionScript AppleScript Asp BASIC C C++ Clojure COBOL ColdFusion Erlang Fortran Groovy Haskell Java JavaScript Lisp Perl PHP Python Ruby Scala Scheme

    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.

    1. 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()); } }); }); 
    2. 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()); } });