選択オプションの値に基づいてJQueryオートコンプリート

Question

私は非常にJQueryとJavascriptを初めて使っています。 jQueryデモを使用してリモートデータソース（Mysql + PHP）からデータを取得するオートコンプリート機能を実装しました。 私は、PHPスクリプトによってトリガーされたmysqlクエリがドロップダウンメニューオプションにバインドされている部分で立ち往生しています。

したがって、オプション値の1つから「コメント」を選択すると、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でオートコンプリートウィジェットを一度初期化することをおすすめします。 select要素の値が変更されたときは、sourceを設定するoptionメソッドを使用することができます。

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