Question

我使用从here复制的表单代码，允许用户添加输入字段。

<form action="" >
    <div class="input-group control-group after-add-more">
   <input type="text" name="q[]" class="form-control" placeholder="Enter Name Here" id="autocomplete-key">
      <div class="input-group-btn">
      <button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
      </div>
  </div>
  <button type="submit" class="btn btn-primary" style="background-color:#55BC8A;border:none">Pesquisa</button>
</form>

<!-- Copy Fields-These are the fields which we get through jquery and then add after the above input,-->
<div class="copy-fields hide">
  <div class="control-group input-group" style="margin-top:10px">
    <input type="text" name="q[]" class="form-control" placeholder="Enter Name Here" id="autocomplete-key">
    <div class="input-group-btn">
      <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
    </div>
  </div>
</div>

我的问题是我想从一组固定的可能性中添加自动完成功能。为此，我使用此代码：

<script type="text/javascript">
    $(document).ready(function(){
        var location_input=$('input[id="autocomplete-key"]');
        location_input.autocomplete({
          source: "/api/get_key_name/",
          minLength: 2
        });
      } );

    //   keeps same width as box
      jQuery.ui.autocomplete.prototype._resizeMenu = function () {
          var ul = this.menu.element;
          ul.outerWidth(this.element.outerWidth());
        }
</script>

它适用于第一个输入字段，但它不适用于添加的新输入字段。

更新：我制作了一个片段以更好地举例说明问题：

＆＃13;

$(document).ready(function() {

//here first get the contents of the div with name class copy-fields and add it to after "after-add-more" div class.
  $(".add-more").click(function(){
      var html = $(".copy-fields").html();
      $(".after-add-more").after(html);
  });
//here it will remove the current value of the remove button which has been pressed
  $("body").on("click",".remove",function(){
      $(this).parents(".control-group").remove();
  });

});
 
 var availableTutorials  =  [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
            ];
 
 $(document).ready(function() {
    $.each($('.autocomplete'), function(i,e) {
        $(e).autocomplete({
            source: availableTutorials,
            minLength: 2,

        });
    });
});

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>


<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" type="text/javascript"></script>



    <form action="" >
    	<div class="input-group control-group after-add-more">
       <input type="text" name="q[]" class="autocomplete form-control" placeholder="Enter Name Here">
    	  <div class="input-group-btn">
          <button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
    	  </div>
      </div>
      <button type="submit" class="btn btn-primary" style="background-color:#55BC8A;border:none">Pesquisa</button>
    </form>

    <!-- Copy Fields-These are the fields which we get through jquery and then add after the above input,-->
    <div class="copy-fields hide">
      <div class="control-group input-group" style="margin-top:10px">
        <input type="text" name="q[]" class="autocomplete form-control" placeholder="Enter Name Here">
        <div class="input-group-btn">
          <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
        </div>
      </div>
    </div>

＆＃13;

Answer 1

您正在使用唯一的val customDialog = UI { verticalLayout{ padding = dip(16) val shortName = editText { hint = "Short name" textSize = 24f } val pwd = editText { hint = "Password" textSize = 24f } } } alert("Let me join in") { customView { verticalLayout { customDialog yesButton { isCancelable = true } noButton { it.dismiss() } } } }.show()，使用类并将id添加到所有输入中：

html：

autocomplete

js：

<input type="text" name="q[]" class="autocomplete form-control" placeholder="Enter Name Here" id="autocomplete-key">

动态添加输入字段的自动完成功能

1 个答案: