javascript - 动态字段上的 AJAX 自动完成

Question

我有一个工作代码，其中如果我可以添加最多 10 个输入字段。另外，我需要将这些输入字段与 ajax 自动完成合并，但是，只有第一个输入字段有效。

这是html代码:

<div class="item form-group">
    <label class="control-label col-md-3 col-sm-3 col-xs-12">Respondent <span class="required">*</span></label>
    <div class="col-md-6 col-sm-6 col-xs-12">
        <input id="search-box" class="form-control col-md-5 col-xs-12" name="respondent[]" required="required" type="text">
        <div id="suggesstion-box"></div>
    </div>
</div>
<div class = 'd'></div>

添加动态输入字段:

<script>
        $(document).ready(function() {
            var max_fields      = 10; //maximum input boxes allowed
            var wrapper         = $(".d"); //Fields wrapper
            var add_button      = $("#add_field_button"); //Add button ID


            var x = 1; //initlal text box count
            $(add_button).click(function(e){ //on add input button click
                e.preventDefault();
                if(x < max_fields){ //max input box allowed
                    x++; //text box increment
                    $(wrapper).append('<div class="item form-group"><label class="control-label col-md-3 col-sm-3 col-xs-12">Respondent <span class="required">*</span></label><div class="col-md-6 col-sm-6 col-xs-12"><input id="search_resp1" class="form-control col-md-5 col-xs-12" name="respondent[]" required="required" type="text"/> <div id="resp1"></div> </div><a href="#" class="remove_field">Remove</a></div>'); //add input box
                }
            });

            $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
                e.preventDefault(); $(this).parent('div').remove(); x--;
            });

        });
</script>

AJAX 代码:

<script>
        $(document).ready(function(){
            $("#search-box").keyup(function(){
                $.ajax({
                type: "POST",
                url: "../search/docrequest_search.php",
                data:'keyword='+$(this).val(),
                beforeSend: function(){
                    $("#search-box").css("background","#FFF");
                },
                success: function(data){

                    if (data == 0) {
                        $("#suggesstion-box").html('<ul style="width: 550px; position: absolute; top: 100%;  z-index: 10;" id="country-list"><li>No match found.</li></ul>');

                    }
                    else {
                        $("#suggesstion-box").show();
                        $("#suggesstion-box").html(data);
                        $("#search-box").css("background","#FFF");

                    }

                }
                });
            });
        });
        $(document).click( function(){

            $('#suggesstion-box').hide();
        });
        function selectCountry(val) {
        $("#search-box").val(val);
        $("#suggesstion-box").hide();
        }
    </script>

AJAX 的外部 PHP 代码:

<?php
      require_once("dbcontroller.php");
      $db_handle = new DBController();

      if(!empty($_POST["keyword"])) {
           $query ="SELECT * FROM person WHERE (firstName like '" . $_POST["keyword"] . "%' OR lastName like '" . $_POST["keyword"] . "%') AND residentOrNot = 'Yes' AND income != 0";
           $result = $db_handle->runQuery($query);

      if(!empty($result)) {
  ?>
    <ul id="country-list" style = "width: 550px; position: absolute; top: 100%; margin: 0;  z-index: 10; padding: 0;">
    <?php
    foreach($result as $country) {
    ?>
    <li onClick="selectCountry('<?php echo $country["idPerson"]?>');">Name: <?php echo $country["firstName"].' '.$country["middleName"].' '.$country["lastName"]; ?><br> ID: <?php echo $country["idPerson"]; ?></li>
    <?php } ?>
    </ul>
    <?php } } ?>

如何使用 AJAX 自动完成我添加的每个输入字段？我应该在代码中添加什么？请帮我。非常感谢。

Answer 1

您永远不会在动态输入字段上添加任何“keyup”监听器。

例如，您可以将 ajax post 包装到名为 autoComplete 的函数中。

然后，当您创建元素时，只需在 keyup 事件上调用该函数即可。

编辑:另外，我注意到您添加了硬 ID，例如:

<input id="search_resp1" 

我认为应该是这样的

<input id="search_resp'+ x +'" 

编辑2:

添加动态输入字段:

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".d"); //Fields wrapper
    var add_button      = $("#add_field_button"); //Add button ID


    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div class="item form-group">'
                                    +'<label class="control-label col-md-3 col-sm-3 col-xs-12">'
                                    +'    Respondent <span class="required">*</span>'
                                    +'</label>'
                                    +'<div class="col-md-6 col-sm-6 col-xs-12">'
                                    +'    <input id="search_resp_'+x+'" class="form-control col-md-5 col-xs-12" name="respondent[]" required="required" type="text"/>'
                                    +'    <div id="resp_'+x+'"></div> '
                                    +'</div>'
                                    +'<a href="#" class="remove_field">Remove</a>'
                               +'</div>'); //add input box
        }
    });


    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); 
        $(this).parent('div').remove(); 
        x--;
    });

    // The same way you added the above click event listener in order to
    // remove the textbox, you add a keyup event listener on the new input
    // and call autoComplete (which contains your ajax request)
    $("#search_resp_"+x).keyup(
        function(){
            autoComplete();
        });
});

AJAX 代码:

function autoComplete(){
    $.ajax({
        type: "POST",
        url: "../search/docrequest_search.php",
        data:'keyword='+$(this).val(),
        beforeSend: function(){
            $(this).css("background","#FFF");
        },
        success: function(data){

            if (data == 0) {
                $(this).next().html('<ul style="width: 550px; position: absolute; top: 100%;  z-index: 10;" id="country-list"><li>No match found.</li></ul>');
            }
            else {
                $(this).next().show();
                $(this).next().html(data);
                $(this).css("background","#FFF");
            }
          // $(this) should be you textbox
          // and $(this).next() will return the div next to your textbox
          // which is, I guess, the div used for displaying the results
        }
    });
}

$(document).ready(function(){
    $("#search-box").keyup(function(){
        autoComplete();
    });
});

您可能希望用于显示结果的 div 在您点击外部时隐藏。

$(document).click( function(){
            $('#suggesstion-box').hide();
        });

这只会隐藏您的第一个建议框。我建议你为你的div创建一个类，id为“resp_'+x'”和建议框，然后隐藏它:

$(document).click( function(){
            $('.your_class').hide();
        });