Dwa zależne pola input text, Dwa zależne pola input text Opcje

[tomzoll]

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.

[tomzoll]

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:

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>

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>

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 ?(IMG:style_emoticons/default/smile.gif)

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>

Ten post edytował tomzoll 6.12.2011, 18:24:11