5

我对 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，我深表歉意。谢谢

4

1 回答 1

3

我建议在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();
});
于 2013-01-19T18:27:03.097 回答