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

我有一个工作代码,如果我最多可以添加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进行自动完成?我应该在代码中添加什么?请帮我。非常感谢。

参考方案

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

例如,您可以将ajax帖子包装到一个名为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();
        });

使用php重新加载内容 - javascript

在对网站进行编程时,我以前使用过此代码,它可以完美工作,但是现在当我想使用一些Flash部件时,每次单击链接时,它都会重新加载所有网站。源代码: <!DOCTYPE html> <html> <head> <title>Hot King Staff</title> <meta charset=…

用jQuery填充模式形式 - javascript

我正在将订单表从数据库绘制到datatables(jquery插件)中。我要在每笔最后一笔交易或每笔交易中增加付款。问题是,如何获取单击添加付款按钮以添加付款的行的订单ID。其次,当点击addpayment时,它会弹出一个带有字段或订单号的模态表单。我想用在td中找到的订单ID填充该字段,并使其不可编辑或隐藏,但在提交模态表单时将其发布到服务器。表格和模式表…

保留文本区域的数据或值,然后选择输入 - javascript

通过$ _POST提交表单时,输入文件值仍然保留。像这样: if($_POST){ $error = false; if(!$post['price']){ $error = true; $error_note['price'] = "*Should not be empty"; } if($err…

带有AJAX和DOM处理API的下拉菜单 - javascript

我从API获取数据,但未在我的下拉菜单中显示。如果我用?act=showprovince回显,结果就在那里。example.html<head> <link rel="stylesheet" type="text/css" href="css/normalize.css"> …

尽管刷新,jQuery格式仍未应用于Ajax数据 - javascript

我正在通过GET响应消息从服务器(php文件)的可折叠内部加载列表视图。但是,尽管刷新了jQuery元素,但jQuery格式并未应用于添加的HTML。我的页面在这里:http://i.cs.hku.hk/~hsbashir/Project_Work/events/events.htmlHTML代码(仅相关代码)<script> lastRecor…