Jquery UI combobox completamento automatico pulsante clic evento

Question

Sto sperimentando un comportamento strano con jquery ui autocomplete when using it to create a combobox. Ogni volta che clicco sulla barra di scorrimento per scorrere l'elenco dei risultati E quindi fare clic sul mio pulsante Combobox per chiudere i risultati, l'elenco dei risultati si chiude e poi si riapre. Mi aspetto che chiuda il menu.

Procedura per Repro

1. open jsfiddle demo
2. tipo 'i' nel completamento automatico o colpire il pulsante a discesa.
3. Cliccare sulla scorrimento verticale per scorrere i risultati
4. Fare clic sul pulsante a discesa

script per creare Pulsante

this.button = $("<button type='button'>&nbsp;</button>") 
    .attr({ "tabIndex": -1, "title": "Show all 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() { 

     // when i put breakpoint here, and my focus is not on input, 
     // then this if steatment is false???? 

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

CSS (forza risultati a lungo menù per scorrere)

.ui-autocomplete { 
    max-height: 100px; 
    overflow-y: auto; 
    /* prevent horizontal scrollbar */ 
    overflow-x: hidden; 
    /* add padding to account for vertical scrollbar */ 
    padding-right: 20px; 
} 
/* IE 6 doesn't support max-height 
* we use height instead, but this forces the menu to always be this tall 
*/ 
* html .ui-autocomplete { 
    height: 100px; 
} 

La mia soluzione potrebbe chiudere il widget anche se lo stato attivo viene trasferito al widget stesso e non all'elemento di input?

Qualche idea su come modificare questo codice in modo che si comporti in questo modo?

Answer 1

Sulla base di problemi con i vari clic del mouse e eventi per il widget automplete, sono arrivato fino a questo: jsFiddle example.

jQuery:

var input = $('#txtComplete'); 

var data = []; 
var isOpen = false; 

function _init() { 
    for (var idx = 0; idx <= 100; idx++) { 
     data.push('item: ' + idx); 
    }; 
    input.autocomplete({ 
     source: data, 
     minLength: 0, 
     open: function(event, ui) { 
      isOpen = true; 
     }, 
     select: function(event, ui) { 
      isOpen = false; 
     } 
    }); 
} 

function afterInit() { 
    var button = $("<button type='button'>&nbsp;</button>").attr("tabIndex", -1).attr("title", "Show all 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(event) { 
     input.focus(); 
     if (isOpen) { 
      input.autocomplete("close"); 
      isOpen = false; 
     } else { 
      input.autocomplete("search", ""); 
      event.stopImmediatePropagation(); 
     } 
    }); 
} 
$(window).click(function() { 
    input.autocomplete("close"); 
    isOpen = false; 
}); 
$(function() { 
    _init(); 
    afterInit(); 
});​ 

Answer 2

Il problema è causato da un aggiramento del completamento automatico di jquery ui. Esiste una configurazione di evento "mouse" per chiudere il menu in determinate condizioni. In una delle condizioni controlla se l'elemento che ha generato il mouse è parte del widget di completamento automatico. In caso contrario, chiude il menu. Dato che stai virando sul comportamento della combobox e il tuo pulsante non fa parte del widget di completamento automatico, un clic sul pulsante sta chiudendo il menu a causa di questo evento.

È possibile visualizzare la condizione di errore con il motivo per cui è presente a partire dalla riga 205 nello autocomplete source on github. Probabilmente vale la pena sollevare il problema sui forum di jquery ui dato che la loro demo di combo ha anche questo bug.

UPDATE

Questo evento sostituzione è basata fuori di jquery-ui 1.8.18. Questo evento è cambiato e molto probabilmente cambierà di nuovo. Potrebbe essere necessario aggiornare questo codice manualmente con ogni versione se si va su questa rotta.

È possibile correggere l'evento mousedown di non chiudere il menu se fosse il pulsante combo che è stato cliccato eseguendo il seguente dopo aver creato il vostro completamento automatico (jsfiddle demo).

var input = $('#combotextbox').autocomplete(/*options*/); 
input.data('autocomplete').menu.element.unbind('mousedown').mousedown(function(event) { 
     var self = input.data('autocomplete'); 
     event.preventDefault(); 
     // clicking on the scrollbar causes focus to shift to the body 
     // but we can't detect a mouseup or a click immediately afterward 
     // so we have to track the next mousedown and close the menu if 
     // the user clicks somewhere outside of the autocomplete 
     var menuElement = self.menu.element[0]; 
     if (!$(event.target).closest(".ui-menu-item").length) { 
      setTimeout(function() { 
       $(document).one('mousedown', function(event) { 
        var t = $(event.target); 
        if (event.target !== self.element[0] && event.target !== menuElement && !$.ui.contains(menuElement, event.target) && !t.hasClass('ui-combo-trigger') && !t.parent().hasClass('ui-combo-trigger')) { 
         self.close(); 
        } 
       }); 
      }, 1); 
     } 

     // use another timeout to make sure the blur-event-handler on the input was already triggered 
     setTimeout(function() { 
      clearTimeout(self.closing); 
     }, 13); 
    }); 

Questo rimuove l'evento MouseDown corrente e poi aggiunge nuovamente con un controllo aggiunto per vedere se l'elemento che ha generato l'evento o della sua controllante (pulsante cliccato o ui-icon all'interno del pulsante viene premuto) ha un classe ui-combo-trigger.

Il codice per creare il pulsante è relativamente invariato. Abbiamo solo bisogno di aggiungere la nuova classe ui-combo-trigger.

var button = $("<button type='button'>&nbsp;</button>").attr("tabIndex", -1).attr("title", "Show all items").insertAfter(input).button({ 
     icons: { 
      primary: "ui-icon-triangle-1-s" 
     }, 
     text: false 
    }).removeClass("ui-corner-all").addClass("ui-corner-right ui-button-icon ui-combo-trigger").click(function(event) { 

     // when i put breakpoint here, and my focus is not on input, 
     // then this if steatment is false???? 
     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(); 
     event.stopImmediatePropagation(); 
    }); 

Answer 3

Prova questo jsfiddle. Penso che ti aiuterà.

var input = $('#txtComplete'); 

var data = []; 
var openCheck = false; 

function _init() { 
    for (var idx = 0; idx <= 100; idx++) { 
     data.push('item: ' + idx); 
    }; 
    input.autocomplete({ 
     source: data, 
     minLength: 0, 
     open: function(event, ui) { 
      openCheck = true; 
     }, 
     select: function(event, ui) { 
      openCheck = false; 
     } 
    }); 
} 

function afterInit() { 
    var button = $("<button type='button'>&nbsp;</button>").attr("tabIndex", -1).attr("title", "Show all 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(event) { 
     if (openCheck) { 
      input.autocomplete("close"); 
      openCheck = false; 
     } else { 
      input.autocomplete("search", ""); 
     } 
    }); 
} 

$(function() { 
    _init(); 
    afterInit(); 
}); 

Answer 4

Brian ha spiegato il problema molto bene. Con jQuery UI 11 si può fare qualcosa di simile:

wasOpen = false; 
$button 
    .mousedown(function() { 
    wasOpen = input.autocomplete("widget").is(":visible"); 
    }) 
    .click(function() { 
     input.focus(); 

     // Close if already visible 
     if (wasOpen) { 
      return; 
     } 

vedi esempio a http://jqueryui.com/autocomplete/#combobox