基於選擇選項值的JQuery自動完成

Question

我對JQuery和Javascript非常新穎。我已經實現了使用jQuery Demo從遠程數據源（Mysql + PHP）中檢索數據的自動完成功能。 我被困在由php腳本觸發的mysql查詢綁定到下拉菜單選項的部分。

因此，如果我從選項值之一中選擇「註釋」，如何將其綁定到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> 

現在，如果選擇選項值作爲「註釋」，它應該觸發查詢註釋字段的PHP腳本。但我不確定如何將條件語句放入JQuery中。我沒有得到成功

$(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}); 
      }); 
} 

我不知道這是否是正確的方法。我很抱歉，如果這個問題不值得stackoverflow.com。 謝謝

Answer 1

我會建議在input上初始化一次自動填充小部件。可以使用option方法來設置source當select元件的值改變：

$(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. 
}); 

可以使這甚至更健壯通過使用在每個指示要使用哪個源選項data-*屬性：

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(); 
});