Uwierzytelnianie interfejsu użytkownika jquery w modalnym oknie dialogowym - sugestie nie są wyświetlane?

Question

Używam widżetu autouzupełniania jquery ui w oknie dialogowym jquery ui. kiedy wpisuję tekst wyszukiwania, wcięcia w polu tekstowym (ui-autocomplet-loading), ale nie wyświetlają żadnych sugestii.

var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"]; 

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

firma jest identyfikatorem pola tekstowego dołączania autouzupełniania.

Pomyślałem, że może to być wskaźnik oo więc ustawić:

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

ale nadal nie widać. umieszczam autouzupełnianie na "zwykłej" stronie i działa dobrze.

Używam jquery ui wersji 1.8.2. wszelkie pomysły gdzie szukać?

Answer 1

I rozwiązać dodając atribute z-index:1500 do moich div w jquery.autocomplete.css ponieważ jQuery UI Dialog umieścić z-index między 1000 a 1005

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

Answer 2

W moim przypadku dodawania stylów CSS nie działa , ale po dodaniu własności zIndex dokładnie do konstruktora elementu jQuery ui działa jak urok.

Answer 3

Natknąłem się na tę odpowiedź podczas wyszukiwania tego samego problemu, jednak żadne z rozwiązań nie było dokładnie tym, czego chciałem.

Używanie, pracowałem, sortuj ... Obiekty autouzupełniania pokazywały się tam, gdzie powinny, jednak całkowicie wyrzuciły moje okno dialogowe w zniekształcony bałagan nieprawidłowo ustawionych elementów div.

Więc w moim pliku css, stworzyłem następujące:

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

Jestem pewien, że 1100 jest trochę przesadą, ale ja po prostu chciałem grać bezpiecznie. Działa dobrze i jest zgodny z K.I.S.S. metoda.

Używam jQuery 1.9.2 z jQueryUI 1.10.2.

Answer 4

Dodaj następującą metodę do JavaScript i nazywają to ze zdarzenia onload elementu body:

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

To działa dla mnie :) mam to patrząc na komputerowej styl modalnego okna dialogowego do zobacz, co to był z-index. Tak więc cała funkcja polega na pobraniu pola auto sugestii, które zostało utworzone przez jquery (przez jedną z jego nazw klas, które mogą być różne dla ciebie, ale idea jest wciąż taka sama) i zmodyfikuj jego css tak, aby zawierał indeks Z o 1 punkt wyższy niż Indeks Z modalu (który był 1050)

Answer 5

Korzystając z interfejsu jQuery UI 1.10, nie powinieneś mieszać z indeksami Z (http://jqueryui.com/upgrade-guide/1.10/#removed-stack-option). Opcja appendTo działa, ale ogranicza wyświetlanie do wysokości okna dialogowego.

Aby to naprawić: upewnij się, że element jest autouzupełnianie w odpowiedniej kolejności DOM z: autouzupełniania .insertAfter (dialogowym.rodzic())

Przykład

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

Aktualizacja dla problemu z-index Po kliknięciu dialogowym

Z-indeks autouzupełniania wydaje się zmieniać po kliknięciu w oknie dialogowym (jak donosi MatteoC). poniżej Rozwiązaniem wydaje się to naprawić:

See skrzypce: https://jsfiddle.net/sv9L7cnr/

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

Answer 6

dla jednego lub wielokrotność Autouzupełnianie w tym samym DialogBox:

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

Answer 7

Niedawno miałem ten sam problem. Dodając to do mojego pliku CSS rozwiązać to dla mnie:

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

raz pierwszy spróbował swoją początkową wartość z-indeks 1006, ale to nie działa. Zwiększenie wartości działało dla mnie.

Answer 8

To załatwiło sprawę dla mnie:

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

Answer 9

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

Uwaga: $ ('# divName') divName będzie nazwa modalnej ciała.

PRZYKŁAD:

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

Answer 10

Rozwiązałem go w bootbox tak:

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

Trzeba tylko dołączyć listę wynik do formularza.

Answer 11

byłem przeżywa ten sam problem, kiedy dotarło do mnie:

swój dialog zawsze zadeklarować przed ustawieniem autouzupełniania.

Wymieniłem je, i voilà!

Autouzupełnianie konfiguruje się wokół docelowego miejsca docelowego. Okno dialogowe tworzy nowy znacznik i CSS wokół docelowego kontenera. Moje wybory pojawiają się za oknem dialogowym lub poza ekranem.

Answer 12

Miałem również ten problem. Pracuję w UserFrosting, który ma bootstrap i select2, ale nie ma jQuery-ui w rdzeniu. Moje autouzupełnianie znajdowało się w modalnym wyskakującym okienku, gdzie znacznik skryptu i $(document). Są już po html dla formy modalnej. Po prostopadłym wszystkie rodzaje nieistniejących konfliktów i próbuje zrobić select2 (v 4) do combobox, wróciłem do hack css i to działało:

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

Moje środowisko jest

• UserFrosting z jQuery 1-11.2
• bootstrap-3.3.2,
• bootstrap-modal
• select2 v3.5.1
• jquery-ui-1.11.4 (dot-luv motyw)

Answer 13

W implementacji autocomplete, dodać appendTo: "#search_modal", gdzie search_modal jest ID twojego modalu.

Answer 14

Spróbuj to: -
my_modal: modalna id
Zastosowanie appendTo rekwizytem autocomplate

$ ("# input_box_id") autouzupełnianie ({
źródło: sourceArray/link,
. appendTo: "# my_modal"
});

referencyjny: odpowiedź https://stackoverflow.com/a/22343584/5803974

Answer 15

Johann-S 'here pracował dla mnie.

po prostu dodać dane ostrości = „false” do przycisku lub łącza wywołującego modal jak

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

ten sposób nie trzeba zadzierać z-indeksy lub zastąpić bootstrap na egzekwować ostrość (to nie jest o nazwie)