动态表单输入字段和使用AJAX自动完成

Question

我有一个工作代码，我可以动态添加可用于使用AJAX自动完成的输入字段。虽然工作，但有一些限制。添加更多字段后，自动填充的位置不正确，如此图所示：

结果未显示在当前输入字段下，而是显示在最后一个字段下。最后，一旦用户添加了太多的输入字段并开始删除它们，自动完成功能将完全停止工作。

HTML代码：

<div class="item form-group"> 
    <label class="control-label col-md-3 col-sm-3 col-xs-12">Case Category <button style="margin-top: 5px;" id = "add_field" class="add_field btn btn-primary btn-xs">+</button></label> 
    <div class="col-md-6 col-sm-6 col-xs-12"> 
     <input id="search_keyword_idd" class="search_keywordd form-control col-md-5 col-xs-12" name="category[]" required="required" type="text"> 
     <input type="hidden" name="catID[]" id="catID"/> 
     <div id="resultd"></div> 
    </div> 
</div> 
<div class = "t"></div> 

使用Javascript/jQuery的铂。 1：（在第一输入字段）

 <script type="text/javascript"> 
     $(function(){ 
     $(".search_keywordd").keyup(function() 
     { 
      var search_keyword_value = $(this).val(); 
      var dataString = 'search_keyword='+ search_keyword_value; 
      if(search_keyword_value!='') 
      { 
       $.ajax({ 
        type: "POST", 
        url: "../resources/ajax-search/case_category.php", 
        data: dataString, 
        cache: false, 
        success: function(html) 
         { 
          $("#resultd").html(html).show(); 
         } 
       }); 
      } 
      return false;  
     }); 

      jQuery("#resultd").on("click", ".show", function(e){ 
       var showName = $('.returnName',this).text(); 
       var showId = $('.returnID',this).text(); 
       $('#search_keyword_idd').val(showName); 
       $('#catID').val(showId); 
      }); 

      jQuery(document).on("click", function(e) { 
       var $clicked = $(e.target); 
       if (! $clicked.hasClass("search_keywordd")){ 
       jQuery("#resultd").hide(); 
       } 
      }); 



      $('#search_keyword_idd').click(function(){ 
       jQuery("#resultd").show(); 
      }); 
     }); 
    </script> 

的Javascript/jQuery的铂。 2：（在用户想要添加的输入字段）

$(document).ready(function() { 
      var max_fields  = 10; //maximum input boxes allowed 
      var wrapper3   = $(".t"); //Fields wrapper 
      var add_button3  = $("#add_field"); //Add button ID 

      var z = 1; //initlal text box count 
      $(add_button3).click(function(e){ //on add input button click 
       e.preventDefault(); 

        if(z < max_fields){ //max input box allowed 
         z++; //text box increment 
         $(wrapper3).append('<div class="item form-group"><label class="control-label col-md-3 col-sm-3 col-xs-12"></label><div class="col-md-6 col-sm-6 col-xs-12"><input id="search_keyword_idd'+z+'" class="search_keywordd'+z+' form-control col-md-5 col-xs-12" name="category['+z+']" required="required" type="text"><input type="hidden" name="catID['+z+']" id="catID'+z+'"/><div id="resultd'+z+'"></div><button class="remove btn btn-dark">Remove</button></div></div>'); //add input box 
         $("#resultd"+z+"").css({"margin-top": "40px", "position": "absolute", "display": "none", "border-top": "0px", "overflow": "visible", "border": "1px #F0F0F0 solid", "float": "left", "padding": "0"}); 
         //$(".show"+z+"").css("cursor:", "default", "margin:", "0", "display:", "none", "background:", "#F7F7F7", "width:", "548px", "border-bottom:", "#F0F0F0 1px solid", "position:", "relative", "z-index:", "10"); 
        } 

        $(".search_keywordd"+z+"").keyup(function() { 

         var search_keyword_value = $(this).val(); 
         var dataString = 'search_keyword='+ search_keyword_value; 
         if(search_keyword_value!='') { 
          $.ajax({ 
           type: "POST", 
           url: "../resources/ajax-search/case_category.php", 
           data: dataString, 
           cache: false, 
           success: function(html) 
            { 
             $("#resultd"+z+"").html(html).show(); 
            } 
          }); 
         } 
         return false; 
        }); 

        jQuery("#resultd"+z+"").on("click", ".show", function(e){ 
         var showName = $('.returnName',this).text(); 
         var showId = $('.returnID',this).text(); 
         $('#search_keyword_idd'+z+'').val(showName); 
         $('#catID'+z+'').val(showId); 
        }); 


        jQuery(document).on("click", function(e) { 
         var $clicked = $(e.target); 
         if (! $clicked.hasClass("search_keyword"+z+"")){ 
         jQuery("#resultd"+z+"").hide(); 
         } 
        }); 

        $('#search_keyword_idd'+z+'').click(function(){ 
         jQuery("#resultd"+z+"").show(); 
        }); 

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

PHP：

我很茫然哪个部分（一个或多个）不工作，以及如何解决它，这样：

1. 自动完成框显示当前onfocus输入下
2. w ^母鸡最大数量的输入添加，然后删除，自动完成功能仍然有效

Answer 1

看看这是你在找什么。在看控制台时HTML看起来是正确的，但我没有你的CSS，所以很难说。变化：

1）我已经删除了所有的id值赞成只使用类。这样，你不必担心值id ...什么适用于一个静态块的HTML，将工作的动态块，所以请注意所有在HTML中的变化

2）我已经合并所有js到刚才我已经粘贴下面

3）有阿贾克斯只有一个实例

4）所有点击被归结为一个if/else/else if条件：

<div class="item form-group"> 
    <label class="control-label col-md-3 col-sm-3 col-xs-12">Case Category <button style="margin-top: 5px;" class="add_field btn btn-primary btn-xs">+</button></label> 
    <div class="col-md-6 col-sm-6 col-xs-12 search_wrap"> 
     <input class="search_keyword form-control col-md-5 col-xs-12" name="category[]" required="required" type="text"> 
     <input type="text" name="catID[]" /> 
     <div class="resultd"></div> 
    </div> 
</div> 
<div class = "t"></div> 

的Javascript

<script type="text/javascript"> 
// I have created an ajax instance incase you want to use ajax else where 
// You just make a new instance instead of copy/pasting same scripts 
var AjaxEngine = function() 
    { 
     $  = arguments[0]; 
     var url = '../resources/ajax-search/case_category.php'; 
     // Allows you to use a different destination for the call 
     this.useUrl = function() 
      { 
       if(arguments.length === 1) { 
        url = arguments[0]; 
       } 

       return this; 
      }; 

     this.ajax = function(data,userFunc) 
      { 
       $.ajax({ 
        type: "POST", 
        url: url, 
        // Send data object instead of string 
        data: data, 
        cache: false, 
        // Not hardcoding a response will allow 
        // for flexibility 
        success: function(response) { 
         userFunc(response); 
        } 
       }); 
      } 
    } 
// I just created a php-like empty function 
function empty(val) 
    { 
     return (val !== null && val !== false && val !== '')? false : true; 
    } 
// Group everything into one document ready 
$(function(){ 
    // Hide dropdown 
    $(this).click(function(e) { 
     var target = $(e.target); 
     if(!target.hasClass('resultd')) { 
      $('.resultd').hide(); 
     } 
    }); 
    // Create ajax engine 
    var Remote = new AjaxEngine(jQuery); 
    // run the keyword search, I would use this here so you can 
    // get all instances of keyup, both dynamic and static instances 
    $(this).on('keyup',".search_keyword",function(e){ 
     var sTerm  = $(this).val(); 
     var thisWrap = $(this).parents('.form-group').find('.resultd'); 
     if(!empty(sTerm)) { 
      Remote.ajax({ search_word:sTerm },function(response) { 
       thisWrap.html(response).show(); 
      }); 
     } 
    }); 
    // Create the copy-to function 
    function copyTo(thisShow) 
     { 
      var showName = thisShow.find('.returnName').text(); 
      var showId  = thisShow.find('.returnID').text(); 
      var thisWrap = thisShow.parents('.search_wrap').find('input[name=category\\[\\]]'); 
      thisWrap.val(showName); 
      thisWrap.next().val(showId); 
     }; 
    // Create the add field function 
    function addNewField(obj,max_fields,z) 
     { 
      if(z < max_fields){ 
       obj.append('<div class="item form-group"><label class="control-label col-md-3 col-sm-3 col-xs-12"></label><div class="col-md-6 col-sm-6 col-xs-12 search_wrap"><input class="search_keyword search_keywordd form-control col-md-5 col-xs-12" name="category[]" required="required" type="text"><input type="text" name="catID[]" /><div class="resultd"></div><button class="remove btn btn-dark">Remove</button></div></div>'); //add input box 
       var lastRes = obj.find(".resultd"); 

       lastRes.last().css({"margin-top": "40px", "position": "absolute", "display": "none", "border-top": "0px", "overflow": "visible", "border": "1px #F0F0F0 solid", "float": "left", "padding": "0"}); 
       z++; 
       // return the auto-increment count 
       return z; 
      } 
      // return the max count 
      return max_fields; 
     } 

    var settings = { 
      z: 1, 
      max_fields: 10 
     } 

    $(this).on("click", '.show,.search_keyword,.add_field,.remove', function(e) { 
     // Target the click 
     var clicked = $(this); 
     // Hide by default 
     $(".resultd").hide(); 
     // Run the copyto 
     if(clicked.hasClass("show")) { 
      copyTo(clicked); 
     } 
     // Show the search window 
     else if(clicked.hasClass("search_keyword")) { 
      clicked.parents('.search_wrap').find('.resultd').show(); 
     } 
     // Add fields 
     else if(clicked.hasClass("add_field")) { 
      settings.z = addNewField($(".t"),settings.max_fields,settings.z); 
     } 
     // remove fields 
     else if(clicked.hasClass("remove")) { 
      e.preventDefault(); 
      clicked.parent('div').parent('div').remove(); 
      settings.z--; 
     } 
    }); 
}); 
</script>