基于select选项值的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();
});