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.
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