Dynamiczne podpowiedzi w polu tekstowym na podstawie wartości z innego pola

Witam

Zwracam się do Was z prośbą o pomoc, gdyż rozkładam już ręce. Mianowicie piszę aplikację, która korzysta z ontologicznej bazy wiedzy. Posiadam pole tekstowe w które mogę wpisywać różne ciągi znaków. W momencie gdy podam jakiś ciąg który jest przechowywany w bazie wiedzy to bezpośrednio pod polem tekstowym wyświetlają mi się podpowiedzi, a konkretnie wszystkie indywidua z bazy wiedzy z którymi jest powiązana fraza którą wpisałem w polu tekstowym. Np. jeżeli wpiszę "CMS" to podpowiedziami będą wszystkie systemy zarządzania treścią jakie są powiązane z klasą CMS. Tutaj wszystko działa prawidłowo. Jednak teraz chcę osiągnąć troszkę inny efekt. Mianowicie tym razem mam dwa pola. Pierwszym z nich jest pole typu select z którego wybieram wartość, a drugim jest po raz kolejny pole tekstowe. Chcę osiągnąć efekt polegający na tym, że w momencie wybrania przeze mnie wartości z listy rozwijanej, podpowiedzi pokażą się pod polem tekstowym.

<script type="text/javascript">

$('document').ready(function(){

    $("#category").autocomplete({
        source: "search/autocomplete2",
       minlength: 1,

       select: function(event,ui){

           $('#category2').val(ui.item.value);
            
       }
    });

});

</script>

Tak wygląda mój skrypt. #category to id pola z listą rozwijaną, z któej wybieram wartosć, natomiast #category2 to id pola tekstowego w którym mają pojawić się podpowiedzi. Czyli w momencie gdy z listy wozwijanej wybiorę "CMS" to w chwili kliknięcia w pole tekstowe znajdujące się pod listą rozwijaną chciałbym ujrzeć podpowiedzi, którymi będą moje systemy zarządzania treścią.

Ja bym to zrobił tak:
Dla #category dajemy zdarzenie jquery - change, wewnątrz (tego eventu change) tworzymy Ajaxa, który wywołuje plik, który to zwraca wartości do wyboru. W evencie ajax .done() wypełniamy tablice wartościami, które przyszły z bazy. Napisałem to trochę pokrętnie ale mam nadzieję że rozumiesz.

Dziękuję za odpowiedź Kandif. Spróbuję zrobić to w opisany przez Ciebie sposób. Póki co wytłumaczę jeszcze dokładniej na jakim efekcie mi zależy.

Pod powyższym linkiem umieściłem screena, na którym pokazałem jaki efekt udało mi się osiągnąć, oraz efekt jaki chciałbym osiągnąć. Mianowicie w chwili obecnej mam to co jest po lewej stronie, czyli podpowiedzi pojawiające się pod polem tekstowym w którym wpisuje tekst. Natomiast po prawej stronie zilustrowałem efekt jaki chciałbym uzyskać, czyli w pierwszej kolejności wybieram z listy rozwijanej interesującą mnie wartość, następnie w momencie kliknięcia kursorem myszki w pole tekstowe, które znajdować będzie się poniżej listy rozwijanej, chciałbym ujrzeć podpowiedzi. Bardzo zależy mi na uzyskaniu takiego efektu, gdyż to co mam w chwili obecnej nie wygląda dobrze. Kandif, czy w opisany przez Ciebie sposób jestem w stanie uzyskać właśnie taki efekt ?

Kandif, jeżeli chodzi o same podpowiedzi, to będą one różne w zależności od wybranej kategorii. Próbowałem zmodyfikować swój skrypt zgodnie z Twoimi wytycznymi. Niestety kompletnie mi to nie wychodzi. Na chwilę obecną mój kod wygląda tak:

<script type="text/javascript">

$('document').ready(function(){

  $("#category").change(function(){
        
      //w jaki sposób za pomocą AJAXA wywołać metodę która zwróci odpowiednie podpowiedzi ?
      $("#category").autocomplete({
        source: "search/autocomplete2",
       minlength: 1,

    });
      
      //w jaki sposób za pomocą Ajax.done() wyświetlić podpowiedzi w polu #category2 ?
      $.ajax('#category2').done(function(html) {
           
      $('#category2').val(ui.item.value);
});

    });

});

</script>

Nie wiem w jaki sposób za pomocą AJAXA przekazać parametr (wartość z listy rozwijanej) oraz wywołać metodę, która zwróci odpowiednie podpowiedzi. Nie mam też pomysłu jak przy użyciu eventu Ajax.done() sprawić, aby podpowiedzi wyświetliły się w polu tekstowym o id #category2.

Chyba nie przyjrzałeś się metodzie AJAX w Jquery.

<script type="text/javascript">

$('document').ready(function(){

  $("#category").change(function(){

    $.ajax({
        method: "POST",
        url: "plik_ktory_zwroci_z_bazy_liste.php",
        data: { kategoria: "nazwakategorii" }
        })
        .done(function( zwrocone_dane ) {
            //tutaj wrzucisz zwrocone_dane do autocomplete
        });
            
    });

});

</script>

Zaś w pliku PHP musisz tylko zwrócić się do bazy o podany parametr,

//#plik_ktory_zwroci_z_bazy_liste.php
$kategoria = $_POST['kategoria'];

//np. zapytanie typu: "SELECT FROM mojabazakategorii WHERE kategoria=`$kategoria`"

Oczywiście to zależy jak to masz w bazie zapisane.

Próbowałem postępować zgodnie z Twoimi wytycznymi jednak nadal mam pewne problemy. Chodzi o to, że moja aplikacja napisana jest w frameworku php o nazwie Laravel.
Metoda, która zwraca mi listę podpowiedzi nazywa się autocomplete2. Jej url to: "/search/autocomplete2". Zmodyfikowałem trochę kod, który dodałeś w poprzednim poście, tak wygląda on w chwili obecnej:

<script type="text/javascript">
 
$('document').ready(function(){
 
  $("#category").change(function(){

    //pobieram wybraną wartość z listy rozwijanej
    var search = $('#category').val();
 
    $.ajax({
        method: "POST",
        url: "/search/autocomplete2",
        data: { kategoria: search }
        })
        .done(function( zwrocone_dane ) {
            //tutaj wrzucisz zwrocone_dane do autocomplete
        });
 
    });
 
});
 
</script>

1. Muszę jakoś przekazać do metody autocomplete2 wartość, która została wybrana z listy rozwijanej, dopisałem ta linijkę do powyższego kodu. Wartość jest przekazywana do skryptu. Sprawdziłem to poprzez jej wyświetlenie za pomocą document.write.
2. Jeżeli chodzi o metodę, która zwraca mi podpowiedzi to zwraca ona wynik w ten sposób: return Response::json($results);. W zmiennej $results znajdują się moje podpowiedzi. No i teraz to czego nie rozumiem.Mianowicie chodzi o Twój komentarz w zdarzeniu done().W jaki sposób mogę wrzucić te zwrócone dane do autocomplete, tak aby zostały one wyświetlone jak lista podpowiedzi w polu tekstowym o id #category2 ?

Przepraszam że tak późno odpowiadam, ale ostatnio zaglądałem w sobotę rano. To co jest zmienną "zwrocone_dane" jest tym co jest wyrzucane przez kod PHP. Warto dodać że nie masz to zwrócić za pomocą return lecz wyświetlić np. za pomocą zwykłego echo w PHP. Możesz to zrobić np. w JSON, tak by było najłatwiej. Tu masz przykłady: http://kursjs.pl/kurs/jquery/jquery-ajax.php

@AdrianAK: czy nie wydaje Ci się, że jest trochę nieintuicyjne zachowanie "kliknę na liście rozwijanej, to pokażą się podpowiedzi, ale w innym miejscu"? Szczególnie, że ja spotykam się głównie z działaniem, że kliknięcie w pole tekstowe (ustawienie focusa/aktywowanie?) spowoduje usunięcie (zresetowanie) aktualnie wyświetlanej listy podpowiedzi, i takiego zachowania osobiście bym oczekiwał.