wake-up-neo.com

jQuery-Benutzeroberfläche automatisch vervollständigen in einem modalen Benutzeroberflächendialog - Vorschläge werden nicht angezeigt?

ich verwende das Widget JQuery UI Autocomplete im Dialogfeld JQuery UI. Wenn ich den Suchtext eingebe, wird das Textfeld eingerückt (ui-autocomplet-loading), es werden jedoch keine Vorschläge angezeigt.

var availableTags = ["c++", "Java", "php", "coldfusion", "javascript", "asp", "Ruby", "python", "c", "scala", "groovy", "haskell", "Perl"];

$("#company").autocomplete({        
    source : availableTags ,
minLength: 2
});

firma ist die ID des Textfelds, an das die automatische Vervollständigung angehängt werden soll.

ich dachte, es könnte ein Z-Index sein, also setze ich dies:

.ui-autocomplete, .ui-menu, .ui-menu-item {  z-index: 1006; }

aber es zeigt immer noch nicht. Ich habe die Autovervollständigung in einer "normalen" Seite und es funktioniert gut.

ich benutze JQuery UI Version 1.8.2. Irgendwelche Ideen, wo sie suchen sollen?

21
mango

Ich bin auf diese Antwort gestoßen, als ich nach demselben Problem suchte, aber keine der Lösungen war genau das, was ich wollte.

Mit appendTo wurde gearbeitet, sortiert ... Die Autocomplete-Elemente zeigten sich dort, wo sie sollten, aber mein Dialogfenster warf ein komplettes Durcheinander von fehlerhaft neu positionierten div-Elementen.

In meiner eigenen CSS-Datei habe ich Folgendes erstellt:

ul.ui-autocomplete {
    z-index: 1100;
}

Ich bin sicher, dass 1100 ein wenig übertrieben ist, aber ich wollte nur auf Nummer sicher gehen. Es funktioniert gut und entspricht den K.I.S.S. Methode.

Ich verwende jQuery 1.9.2 mit jQueryUI 1.10.2.

61
DondeEstaMiCulo

Wenn Sie die jQuery-Benutzeroberfläche 1.10 verwenden, sollten Sie sich nicht mit Z-Indizes herumschlagen ( http://jqueryui.com/upgrade-guide/1.10/#removed-stack-option ). Die Option appendTo funktioniert, beschränkt jedoch die Anzeige auf die Höhe des Dialogs. 

Um das Problem zu beheben: Stellen Sie sicher, dass das Autocomplete-Element in der richtigen DOM-Reihenfolge angegeben ist: Autocomplete. InsertAfter (Dialogfeld. Parent ())

Beispiel

 var autoComplete,
     dlg = $("#copy_dialog"),
     input = $(".title", dlg);

 // initialize autocomplete
 input.autocomplete({
     ...
 });

 // get reference to autocomplete element
 autoComplete = input.autocomplete("widget");

 // init the dialog containing the input field
 dlg.dialog({
      ...
 });

 // move the autocomplete element after the dialog in the DOM
 autoComplete.insertAfter(dlg.parent());

Update für Z-Index-Problem nach Klicken auf den Dialog

Der Z-Index der Autovervollständigung scheint sich nach einem Klick auf den Dialog zu ändern (wie von MatteoC gemeldet). Die folgende Problemumgehung scheint das zu beheben:

Siehe Geige: https://jsfiddle.net/sv9L7cnr/

// initialize autocomplete
input.autocomplete({
    source: ...,
    open: function () {
        autoComplete.zIndex(dlg.zIndex()+1);
    }
});
11
mhu

für eine oder mehrere Autovervollständigungen im selben Dialogfeld:

// init the dialog containing the input field
 $("#dialog").dialog({
      ...
 });

// initialize autocomplete
 $('.autocomplete').autocomplete({        
      source: availableTags,
      minLength: 2
 }).each(function() {
      $(this).autocomplete("widget").insertAfter($("#dialog").parent());
 });
7
Jader A. Wagner

Ich habe es in der Bootbox so gelöst:

$( "#company" ).autocomplete({       
    source : availableTags ,
    appendTo: "#exportOrder"
});

Sie müssen lediglich die Ergebnisliste an Ihr Formular anhängen.

Ich habe das Hinzufügen des Attributs z-index:1500 zu meinen divs in Jquery.autocomplete.css behoben, da der Jquery-UI-Dialog den Z-Index zwischen 1000 und 1005 setzt

ul.auto-complete-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 1500;
    max-height: 250px;
    overflow: auto;
}
3
kachar

Fügen Sie in Ihrer autocomplete-Implementierung appendTo: "#search_modal" hinzu, wobei search_modal die ID Ihres Modals ist.

3
Francisco Balam
    $("#company").autocomplete({        
    source : availableTags ,
    appendTo : $('#divName')
    minLength: 2
});

Hinweis: $ ('# divName') divName ist der Name des modalen Körpers.

BEISPIEL:

<form id="exportOrder">
        <div class="input-group">
            <input type="text" id="accountReferenceSearch" placeholder="Type Account Reference to search..." class="form-control" style="width:500px">
        </div>
    </div>
</form>

self.AttachAutoComplete = function () {
                    $('#accountReferenceSearch').focus(function () {
                        $('#accountReferenceSearch').autocomplete({
                            source: function (request, response) {},
                            minLength: 2,
                            delay: 300,
                            appendTo: $("#exportOrder")
                        });
                    });
                }
2
Parth Patel

Ich hatte kürzlich das gleiche Problem. Das Hinzufügen zu meiner CSS-Datei löste es für mich: 

.ui-autocomplete-input, .ui-menu, .ui-menu-item {  z-index: 2006; }

Ich habe zuerst den ersten Z-Index-Wert von 1006 ausprobiert, aber das hat nicht funktioniert. Die Steigerung des Wertes hat für mich gearbeitet. 

2
Anders

Wir hatten das gleiche Problem. Wir haben gerade unsere CSS aktualisiert, so dass der Z-Index hoch genug ist und nicht überschrieben werden kann:

.dropdown-menu {
  z-index: 9999 !important;
}

Da das Anhängen an body das Dropdown-Menü von $ window unterordnet, müssen Sie alle Dropdown-Menüs auf den neuen Z-Index setzen. 

1
farpaci

In meinem Fall funktioniert das Hinzufügen von Stilen in css nicht, aber nachdem Sie die zIndex -Eigenschaft genau zum jQuery-Ui-Elementkonstruktor hinzugefügt haben, funktioniert es wie ein Zauber.

1
Robert Isaev

Ich hatte auch dieses Problem. Ich arbeite in UserFrosting, das bootstrap und select2 hat, aber kein jquery-ui im ​​Kern. Meine Autovervollständigung befand sich in einem modalen Popup-Fenster, in dem sich das Skript-Tag und $(document). Ready hinter der HTML für das modale Formular befinden. Nachdem ich alle Arten nicht existierender Konflikte gejagt und versucht hatte, select2 (v 4) in eine Combobox zu verwandeln, ging ich zurück zum css-Hack und dies funktionierte:

.ui-autocomplete {z-index: 1061 !important;}

Meine Umgebung ist 

  • UserFrosting mit Jquery 1-11.2
  • bootstrap-3.3.2,
  • bootstrap-Modal
  • select2 v3.5.1
  • jquery-ui-1.11.4 (Punkt-Luv-Thema)
1
TauranJanitor

Ich habe das gleiche Problem, aber nach einiger Anstrengung benutze ich Firefox, um eine Lösung zu finden.

Wenn in Chrome eine Autocomplete-Ansicht geöffnet ist und Sie das Element untersuchen möchten, wird dieses ausgeblendet, wenn Sie auf eine Komponente klicken.

aber

In Firefox wird dies fortlaufend angezeigt, sodass wir die Ansicht überhaupt finden können.

und ich tat das Gleiche damit und fand eine Klasse, die einen Z-Index hat

z-index: 1000

also habe ich das einfach zu mehr geändert

.pac-container{
    z-index: 999999;
}

diese Z-Index-Lösung wird möglicherweise nicht für Sie alle funktionieren, aber ich bin mir sicher, dass die Funktion von Firefox Ihnen auf jeden Fall dabei helfen wird, die beste Lösung zu finden.

1
Dev Sabby

Das hat den Trick für mich gemacht:

ul.ui-front {
    z-index: 1100;
}
1
Zeljko Kozina

Fügen Sie Ihrem Javascript die folgende Methode hinzu und rufen Sie es vom onload-Ereignis des body-Elements aus auf:

//initialization
function init(){
    var autoSuggestion = document.getElementsByClassName('ui-autocomplete');
    if(autoSuggestion.length > 0){
        autoSuggestion[0].style.zIndex = 1051;
    }
}

Es funktioniert für mich :) Ich habe dies durch einen Blick auf den berechneten Stil des modalen Dialogs erhalten, um zu sehen, was der Z-Index war. Alles, was die Funktion tut, ist das Auto-Suggestion-Feld, das von Jquery erstellt wird (durch einen ihrer Klassennamen, der für Sie möglicherweise anders ist, aber die Idee ist immer noch derselbe). Nehmen Sie die Css so vor, dass sie einen Z-Index enthält, der um 1 Punkt höher ist der Z-Index des Modals (der 1050 betrug)

0
Corey Harden

Antwort von Johann-S hier arbeitete für mich. 

fügen Sie einfach data-focus = "false" zur Schaltfläche hinzu oder den Link, der die Modalität aufruft 

<button type="button" class="btn btn-primary" 
 data-toggle="modal" 
 data-focus="false"
data-target=".bd-example-modal-sm">Small modal</button>

Auf diese Weise müssen Sie sich nicht mit Z-Indizes herumschlagen und den Erzwingungsfokus von Bootstrap überschreiben (wird nicht genannt).

0
JHRS

Ich hatte das gleiche Problem, als es mir einfiel:

Erklären Sie immer Ihren Dialog, BEVOR Sie die automatische Vervollständigung festlegen.

Ich habe sie umgestellt, und voilà!

Autocomplete konfiguriert sich um den EINGANG, auf den Sie abzielen. Im Dialogfeld werden neue Markups und CSS für den Container erstellt, auf den Sie abzielen. Meine Auswahlmöglichkeiten wurden hinter dem Dialogfeld oder außerhalb des Bildschirms angezeigt.

0

Versuche dies:-
my_modal : modale id
Verwenden Sie die appendTo-Eigenschaft von autocomplete

$("#input_box_id").autocomplete({<br> source:sourceArray/link,<br> appendTo :"#<i>my_modal</i>"<br> }); referenz: https://stackoverflow.com/a/22343584/5803974

0
Satish