Jquery UI autocomplete combobox button-click-Ereignis
Erlebe ich seltsame Verhalten mit jquery ui autocomplete, wenn Sie es zum erstellen einer combobox. Immer, wenn ich Sie auf die Bildlaufleiste, um einen Bildlauf durch die Liste der Ergebnisse UND klicken Sie dann auf meine combobox button zum schließen der Ergebnisse die Ergebnisse, die Liste schließt und dann wieder öffnet. Ich erwarte, dass er das Menü zu schließen.
Schritte zu Repro
- open-jsfiddle demo
- Typ 'i' in der AutoVervollständigen-ODER schlagen Sie auf den dropdown-button.
- Klicken Sie auf die vertikale Bildlaufleiste zu Blättern, die Ergebnisse
- Klicken Sie auf den dropdown-button
Script Erstellen Button
this.button = $("<button type='button'> </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 (Kraft lange Ergebnisse Menü zu scrollen)
.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;
}
Meine Lösung könnte sein, das schließen des widget, auch wenn der Fokus geht auf das widget selbst und nicht das input-element?
Irgendwelche Ideen, wie man diesen code ändern, damit es auf diese Weise verhält?
- Könnten Sie das HTML -, vielleicht ein JSFiddle? Wäre viel einfacher, es zu bekommen, dann.
- Ich verstehe nicht, was Sie versuchen zu erreichen.. jsfiddle
- Was für ein problem du eigentlich zu lösen versucht?
- Mein probem ist, dass wenn ich auf button-widget angezeigt wird, dann klicke ich auf das widget, und Sie erneut auf die Schaltfläche, mein widget neu erstellt wird und nicht geschlossen ist, möchte ich mein dropdown-widget zu öffnen und zu schließen, toggle Angelegenheit!
Du musst angemeldet sein, um einen Kommentar abzugeben.
Basiert auf Fragen, die mit den verschiedenen auf-und Maus-events für die automplete widget, ich kam mit dieser: jsFiddle-Beispiel.
jQuery:
Das problem ist, weil der eine arbeiten, um in jquery ui autocomplete. Es ist ein mousedown-Ereignis setup, um das Menü zu schließen unter bestimmten Bedingungen. In einer der Bedingungen überprüft, um zu sehen, wenn das Element, das erhöht die mousedown ist Teil der autocomplete-widget. Wenn nicht, schließt das Menü. Da Sie Heften auf die combobox Verhalten und die Schaltfläche ist nicht Teil der autocomplete-widget, ein Klick auf den button schließt sich das Menü, weil dieses Ereignis.
Sehen Sie die beanstandeten Zustand mit der Grund, warum es da ist, beginnend bei Zeile 205 in der autocomplete-source auf github. Lohnt es sich wahrscheinlich die Frage auf der jquery ui-Foren, da Ihre combobox demo hat dieser bug auch.
UPDATE
Dieser Ersatz-Veranstaltung ist aus der Basis von jquery-ui-1.8.18. Diese Veranstaltung hat sich geändert und wird sich sehr wahrscheinlich wieder ändern. Sie müssen möglicherweise aktualisieren Sie diesen code manuell mit jedem release, wenn Sie diesen Weg gehen.
Können Sie den patch
mousedown
Fall nicht schließen Sie das Menü, wenn es deine combo-Schaltfläche, auf die geklickt wurde, durch ausführen der folgenden nachdem Sie Ihre autocomplete (jsfiddle demo).Dieses löscht das aktuelle Ereignis mousedown und dann fügt es sich wieder mit einem zusätzlichen check, um zu sehen, wenn das element, das das Ereignis ausgelöst hat oder seine Eltern (Schaltfläche geklickt oder ui-icon im button geklickt wird) hat eine Klasse
ui-combo-trigger
.Den code zu erstellen Sie Ihren button ist relativ unverändert. Wir müssen nur das hinzufügen der neuen Klasse
ui-combo-trigger
.Versuchen, diese jsfiddle. Ich denke, es ll Ihnen helfen.
Brian erklärt das problem sehr gut. Mit jquery ui 11 Sie können etwas tun:
siehe Beispiel im http://jqueryui.com/autocomplete/#combobox