Witam serdecznie. Czy ktoś mógłby mnie nakierować jak utworzyć dwa zależne od siebie pola input, tzn. jedno pole zawiera np. listę z nazwami polskimi zwierząt a drugie pole listę z nazwami łacińskimi zwierząt. Po wybraniu np. nazwy polskiej przypisywana jest w drugim polu automatycznie nazwa łacińska i na odwrót - po wybraniu nazwy łacińskiej zmienia się nazwa polska.
Z góry dziękuję za pomoc i pozdrawiam.
Pełna wersja: Dwa zależne pola input text
wykorzystaj http://api.jquery.com/change/ albo po prostu zwykły onChange z js,w funkcji z ajaxem wywołaj odpowiedni kod i wstaw wartość do sprzężonego inputa 
Chodzi Ci o input czy o select?
Moze wystarczy cos takiego ?
Chodzi mi o input wraz z wykorzystaniem autocomplete. Oczywiście te dwa pola później muszę wprowadzić do bazy To rozwiązanie zaproponowane powyżej jest jednokierunkowe i działa w przypadku wybrania tylko jednej opcji. A tak jak napisałem wcześniej muszą być dwa pola tekstowe z włączonym autocompleterem - każde automatycznie przyjmujace wartość na podstawie któregoś z pola tekstowego, np. po wpisaniu w input text 1 wartości polski 1 automatycznie wypełnia się drugi input wartością łacina 1 i odwrotnie: po wpisaniu w input 2 wartości łacina 1 automatycznie pierwszy input się uzupełnia wartością polski1.
To rozwiązanie zaproponowane powyżej jest jednokierunkowe i działa w przypadku wybrania tylko jednej opcji. A tak jak napisałem wcześniej muszą być dwa pola tekstowe z włączonym autocompleterem - każde automatycznie przyjmujace wartość na podstawie któregoś z pola tekstowego, np. po wpisaniu w input text 1 wartości polski 1 automatycznie wypełnia się drugi input wartością łacina 1 i odwrotnie: po wpisaniu w input 2 wartości łacina 1 automatycznie pierwszy input się uzupełnia wartością polski1.
no to w takim razie musisz zaznajomic sie z tym linkiem
Nie chodzi mi o to jak użyć autocompletera tylko o przypisywanie wartości do pól
Za pomocą pluginu jquery autocomplete z http://bassistance.de/jquery-plugins/jquer...n-autocomplete/ utworzyłem w pełni działający przykład realizujący funkcje o których była mowa powyżej. Oto kod:
Plik search.php tworzy tablicę klucz:wartość więc jego nie będę załączał. Jednak plugin autocomplet nie jest dalej rozwijany a ja chcę skorzystać z autocomplete wchodzącego w skład UI jquery, postanowiłem przerobić ów działający przykład na nową wersję działającąpod UI
Niestety po przerobieniu nie chce działać... Czy ktoś ma może jakiś pomysł gdzie tkwi błąd ?
Pozdrawiam
Prawie wszystko już działa tylko zamiast przepisywać mi wartość łacińską do drugiego pola, przepisuje mi wartość polską - pewnie odwołuję się w kodzie do złej wartości. Czy ktoś mógłby rzucić okiem na to ?
Kod
//skrypt
<script type="text/javascript">
$().ready(function() {
$("#gatunekpolski").autocomplete("search.php", {
width: 260,
selectFirst: false
});
$("#gatuneklacinski").autocomplete("search2.php", {
width: 260,
selectFirst: false
});
$("#gatunekpolski").result(function(event, data, formatted) {
if (data)
$(this).parent().next().find("input").val(data[1]);
});
$("#gatuneklacinski").result(function(event, data, formatted) {
if (data)
$(this).parent().prev().find("input").val(data[1]);
});
$("#clear").click(function() {
$(":input").unautocomplete();
});
});
</script>
//kod html
<form autocomplete="off">
<p>
<label>Polish</label>
<input type="text" id="gatunekpolski" />
</p>
<p>
<label>Latin</label>
<input type="text" id="gatuneklacinski" />
</p>
</form>
<script type="text/javascript">
$().ready(function() {
$("#gatunekpolski").autocomplete("search.php", {
width: 260,
selectFirst: false
});
$("#gatuneklacinski").autocomplete("search2.php", {
width: 260,
selectFirst: false
});
$("#gatunekpolski").result(function(event, data, formatted) {
if (data)
$(this).parent().next().find("input").val(data[1]);
});
$("#gatuneklacinski").result(function(event, data, formatted) {
if (data)
$(this).parent().prev().find("input").val(data[1]);
});
$("#clear").click(function() {
$(":input").unautocomplete();
});
});
</script>
//kod html
<form autocomplete="off">
<p>
<label>Polish</label>
<input type="text" id="gatunekpolski" />
</p>
<p>
<label>Latin</label>
<input type="text" id="gatuneklacinski" />
</p>
</form>
Plik search.php tworzy tablicę klucz:wartość więc jego nie będę załączał. Jednak plugin autocomplet nie jest dalej rozwijany a ja chcę skorzystać z autocomplete wchodzącego w skład UI jquery, postanowiłem przerobić ów działający przykład na nową wersję działającąpod UI
Kod
//nowy skrypt
<script>
$(function() {
$( "#gatunekpolski" ).autocomplete({
source: "search.php",
minLength: 2,
});
$( "#gatuneklacinski" ).autocomplete({
source: "search2.php",
minLength: 2,
});
$("#gatunekpolski").result(function(event, data, formatted) {
if (data)
$(this).parent().next().find("input").val(data[1]);
});
$("#gatuneklacinski").result(function(event, data, formatted) {
if (data)
$(this).parent().prev().find("input").val(data[1]);
});
$("#clear").click(function() {
$(":input").unautocomplete();
});
});
</script>
//kod html
<form autocomplete="off">
<p>
<label>Polish</label>
<input type="text" id="gatunekpolski" />
</p>
<p>
<label>Latin</label>
<input type="text" id="gatuneklacinski" />
</p>
</form>
<script>
$(function() {
$( "#gatunekpolski" ).autocomplete({
source: "search.php",
minLength: 2,
});
$( "#gatuneklacinski" ).autocomplete({
source: "search2.php",
minLength: 2,
});
$("#gatunekpolski").result(function(event, data, formatted) {
if (data)
$(this).parent().next().find("input").val(data[1]);
});
$("#gatuneklacinski").result(function(event, data, formatted) {
if (data)
$(this).parent().prev().find("input").val(data[1]);
});
$("#clear").click(function() {
$(":input").unautocomplete();
});
});
</script>
//kod html
<form autocomplete="off">
<p>
<label>Polish</label>
<input type="text" id="gatunekpolski" />
</p>
<p>
<label>Latin</label>
<input type="text" id="gatuneklacinski" />
</p>
</form>
Niestety po przerobieniu nie chce działać... Czy ktoś ma może jakiś pomysł gdzie tkwi błąd ?
Pozdrawiam
Prawie wszystko już działa tylko zamiast przepisywać mi wartość łacińską do drugiego pola, przepisuje mi wartość polską - pewnie odwołuję się w kodzie do złej wartości. Czy ktoś mógłby rzucić okiem na to ?
Kod
//skrypt
<script>
$(function() {
$('#polski').val("");
$('#latin').val("");
$( "#polski" ).autocomplete({
source: "search.php",
minLength: 2,
select: function( event, ui ) {
$('#latin').val(ui.item.value);
}
});
});
</script>
//html
<div class="ui-widget">
<label for="polski">Polski: </label>
<input id="polski" />
</div>
<div class="ui-widget">
<label for="latin">Latin: </label>
<input id="latin" />
</div>
<script>
$(function() {
$('#polski').val("");
$('#latin').val("");
$( "#polski" ).autocomplete({
source: "search.php",
minLength: 2,
select: function( event, ui ) {
$('#latin').val(ui.item.value);
}
});
});
</script>
//html
<div class="ui-widget">
<label for="polski">Polski: </label>
<input id="polski" />
</div>
<div class="ui-widget">
<label for="latin">Latin: </label>
<input id="latin" />
</div>
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.