Autouzupełnianie JQuery oparte na wartości wybierz opcję

Question

Jestem bardzo bardzo nowy w JQuery i JavaScript. Zaimplementowałem funkcję autouzupełniania, która pobiera dane ze zdalnego źródła danych (Mysql + PHP) za pomocą jQuery Demo. Utknąłem w części, w której zapytanie mysql wywołane przez skrypt php jest powiązane z opcją menu rozwijanego.

Jeśli więc wybiorę "komentarze" z jednej z wartości opcji, w jaki sposób powiązać je z polem tekstowym wyszukiwania o id = "search_term".

<label>Select Search parameter: 
    <select id="search_parameter" name="search_parameter"> 
     <option value="Sample name">Sample Name</option> 
     <option value="Location name">Location Name</option> 
     <option value="comments">Comments</option> 
    </select> 
</label> 

<label> Search Term:<input type="text" id="search_term" required name="search_term" maxlength=30></label> 

Teraz, jeśli wybiorę wartość opcji jako "komentarze", powinien uruchomić skrypt PHP, który wysyła zapytanie do pola komentarza. Ale nie jestem pewien, jak uzyskać warunkowe oświadczenie w JQuery. Nie osiągam sukcesu z

$(function(){ 
    $('#search_parameter').change(function(){ 
     if (this.value == "comments") { 
      jQuery(document).ready(function($){ 
       $('#search_term').autocomplete({source:'search_comments.php', minLength:2}); 
      }); 
     else if(this.value =="Sample name") { 
      jQuery(document).ready(function($){ 
       $('#search_term').autocomplete({source:'search_sample_name.php', minLength:2}); 
      }); 
} 

Nie jestem pewien, czy to właściwe podejście. Przepraszam, jeśli to pytanie nie jest warte stackoverflow.com. Dziękujemy

Answer 1

Polecam zainicjowanie widgetu autouzupełniania raz na input. Można użyć metody option ustawić source gdy wartość elementu select ulega zmianie:

$(function() { 
    $("#search_term").autocomplete({ 
     source: "", 
     minLength: 2 
    }); 

    $("#search_parameter").change(function() { 
     if (this.value === "Sample name") { 
      $("#search_term").autocomplete("option", "source", "search_sample_name.php"); 
     } else if (this.value === "comments") { 
      $("#search_term").autocomplete("option", "source", "search_comments.php"); 
     } 
    }).change(); // Trigger the "change" event to set the source correctly the first time. 
}); 

można zrobić to nawet bardziej wytrzymałe przy użyciu atrybutu data-* na każdej z opcji, która wskazuje, które źródła w użyciu:

HTML:

<label>Select Search parameter: 
    <select id="search_parameter" name="search_parameter"> 
     <option value="Sample name" data-autocomplete="search_sample_name.php">Sample Name</option> 
     <option value="Location name" data-autocomplete="search_locations.php">Location Name</option> 
     <option value="comments" data-autocomplete="search_comments.php">Comments</option> 
    </select> 
</label> 

JavaScript:

$(function() { 
    $("#search_term").autocomplete({ 
     source: '' 
    }); 

    $("#search_parameter").change(function() { 
     var selectedSource = $(this).find("option:selected").data("autocomplete"); 

     $("#search_term").autocomplete("option", "source", selectedSource); 
    }).change(); 
});