12

Mam autouzupełnianie jQueryUI, które znajduje się w oknie dialogowym. W przypadku niektórych starszych wersji jQuery/jQueryUI wyświetla listę zwróconych wartości, a dla najnowszych wersji - nie. Ponadto mam go poprawnie działa na stronie z wieloma innymi rzeczy dzieje się nawet z nowej wersji jQuery/jQueryUI, które nie wydaje się grać ładnie. Oczywiście mam coś, co dzieje się inaczej, ale nie potrafię określić, co to jest. Rozumiem, że mogę używać css do zmiany indeksu z, ale wydaje się to prawie trochę hackowe.Funkcja autouzupełniania jQuery-UI nie jest wyświetlana w oknie dialogowym jQuery-UI.

Proszę zapoznać się z poniższymi dwoma przykładami na żywo.

http://jsbin.com/uciriq/3/ (używa jQuery 1.4.3 i 1.8.4) jQueryUI

http://jsbin.com/uciriq/2/ (używa jQueryUI jQuery 1.9.1 i 1.10.3)

Jak widać (lub stosowane zaznaczono "nie widać"), , zwrócone dopasowania autocomplete dla jQuery 1.9.1/jQueryUI 1.10.3 są wyświetlane za oknem dialogowym.

Jakie jest najlepsze rozwiązanie, aby umożliwić, aby zwrócone dopasowania autouzupełniania były widoczne?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
     <title>autocomplete with dialog</title> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script> 
     <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" /> 
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js" type="text/javascript"></script> 
     <!-- 
     <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css" type="text/css" rel="stylesheet" /> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js" type="text/javascript"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js" type="text/javascript"></script> 
     --> 

     <script type="text/javascript"> 
      $(function() { 
       $("#search").autocomplete({ 
        source: [ "one", "two", "three" ] 
       }); 
       $("#dialog").dialog(); 
      }); 
     </script> 

    </head> 
    <body> 
     <div id="dialog" class="dialog" title="Testing"> 
      <div class="ui-widget"> 
       <label for="search">one, two, three: </label> 
       <input id="search" /> 
      </div> 
     </div> 

    </body> 
</html> 

EDIT Wierzę, że zmiany jQueryUI Dialog opisane przez http://jqueryui.com/upgrade-guide/1.10/ i powielane poniżej są przyczyną moich problemów. Nie jestem pewien, jak najlepiej je zastosować i będę wdzięczny za wszelkie rady.

Dodano opcję appendTo (# 7948) Poprzednio dialogi zawsze były dołączane do ciała, aby zapewnić, że były ostatnim elementem w DOM, aby uniknąć konfliktów z innymi kontekstami układania. Jednak w celu zapewnienia większej elastyczności i uproszczenia logiki układania, dodano opcję appendTo, która domyślnie przyjmuje treść. Sprawdź dokumentację interfejsu API, aby uzyskać więcej informacji.

Usunięto opcję stosu (# 8722) Dialogi wcześniej obsługiwane opcje stosu, które określały, czy okna dialogowe powinny przesuwać się do góry po ustawieniu ostrości. Ponieważ tak powinno być zawsze, opiton został usunięty.

Usunięto opcję zIndex (# 8729) Podobnie jak w przypadku opcji stosu, opcja zIndex jest niepotrzebna przy prawidłowej implementacji stosu. Indeks Z jest definiowany w CSS, a układanie jest teraz kontrolowane przez zapewnienie, że dialog skupiony jest ostatnim elementem "stosowym" w jego rodzica.

+0

Niedawno dowiedziałem się, że jQueryUI wprowadził pewne poważne zmiany w widżecie okna dialogowego i sposób, w jaki zajmuje się układaniem, jak opisano w http://jqueryui.com/upgrade-guide/1.10/. Nie wiem jeszcze, jak to ma zastosowanie, ale jestem pewien, że tak. Dzięki – user1032531

Odpowiedz

24

zmienić swój kod, aby utworzyć okno dialogowe, a następnie dokonać autouzupełniania. na przykład

$(function() 
{ 
    $("#dialog").dialog(); 
    $("#search").autocomplete({ 
    source: [ "one", "two", "three" ] 
    }); 
}); 

Powinien wtedy działać poprawnie, umożliwiając zobaczenie wyników autouzupełniania.

+0

Dzięki Keyneom, to pewnie dlatego jedna strona zadziałała, gdy moja strona testowa nie zadziałała. Zawarłem je w złej kolejności. Podczas gdy to działa (http://jsbin.com/uciriq/9/), należy upewnić się, że nigdy nie wprowadzą ich w niewłaściwą kolejność, co może być trudne. – user1032531

+2

Możesz spróbować, aby autouzupełnianie było częścią otwartego zdarzenia okna dialogowego lub możesz spróbować utworzyć opakowanie, którego możesz użyć podczas tworzenia okna dialogowego, o którym wiedziałbyś, że będzie automatycznie uzupełniane. To może uprościć rzeczy. – keyneom

+0

Twoja sugestia o otwarciu wydarzenia może mieć sens. Zwróć uwagę na mój zredagowany oryginalny wpis, w którym odwołuję się do ostatnich zmian związanych ze stosowaniem, opisanych przez http://jqueryui.com/upgrade-guide/1.10/. Zastanawiam się, czy istnieje jakieś lepsze podejście do radzenia sobie z tym. – user1032531

1

Nie wiem, czy jest to najlepsza odpowiedź, ale można przenieść wyniki autouzupełniania po oknie dialogowym.

$("#search").autocomplete("widget").insertAfter($("#dialog").parent()); 

http://jsbin.com/uciriq/4/

2

lub innej odpowiedzi hackish, można użyć jQuery przenieść z-pozycji. Mam nadzieję, że ktoś wymyśli lepszą odpowiedź niż moi dwoje.

$("#search").autocomplete("widget").css('z-index',1000); 

http://jsbin.com/uciriq/5/

+0

Działa, dzięki! – Zsolti

2

Zmiana wskaźnika Z działa tylko przy pierwszym otwarciu menu rozwijanego, po zamknięciu okno dialogowe zdaje sobie sprawę, że zostało "oszukane" i uaktualnia jego indeks Z.

Również dla mnie zmiana kolejności tworzenia okna dialogowego i autouzupełniania naprawdę była kłopotliwa (myślę, że duża strona internetowa, mnóstwo stron), ale przez przypadek miałem własną funkcję openPopup, która owijała openDialog. Więc wpadłem z następującymi włamać

$("#dialog").dialog({ focus: function() { 
    var dialogIndex = parseInt($(this).parent().css("z-index"), 10); 
    $(this).find(".ui-autocomplete-input").each(function (i, obj) { 
     $(obj).autocomplete("widget").css("z-index", dialogIndex + 1) 
    }); 
}); 

każdym razem okno ma fokus czyli na 1. otwierania i kiedy autouzupełnianie jest zamknięte, każdy autouzupełnianie lista jest z-index jest aktualizowany.

+0

To rozwiązanie sprawdziło się. – Ray

3

Zgadłeś poprawnie że z-index/appendTo mieć coś wspólnego z Twoim problemem.

Musisz ustawić opcję appendTo -opcję autouzupełniania do elementu wewnątrz okna dialogowego, a następnie autouzupełnianie wyświetla się poprawnie.

Zastrzeżenie: Jeśli lista wyników jest dłuższa niż dostępne miejsce w oknie dialogowym, pojawi się pasek przewijania.

edytowany swoją jsbin odzwierciedlać to: http://jsbin.com/vavevugoqi/

JS:

$("#search").autocomplete({ 
    appendTo: "#myContainer", 
    source: [ "one", "two", "three" ] 
}); 

HTML:

<div id="dialog" class="dialog" title="Testing"> 
    <div id="myContainer" class="ui-widget"> 
     <label for="search">one, two, three: </label> 
     <input id="search" /> 
    </div> 
</div> 

PS: Sry wykopać taką starą pytanie, ale ja myślę, że może to pomóc niektórym ludziom przychodzącym tutaj z google (jak ja).