Question

我对JQuery和Javascript非常新。我已经实现了自动完成功能，可以使用jQuery Demo从远程数据源（Mysql + PHP）中检索数据。我被困在由php脚本触发的mysql查询绑定到下拉菜单选项的部分。

因此，如果我从其中一个选项值中选择“comments”，如何将其绑定到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();
});

基于select选项值的JQuery自动完成

1 个答案: