Question

我已经包含了automcomplete JS以及自动完成的数据

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.min.js"></script>

$("#button").click(function(){
  $("#taskform").clone().appendTo("#taskform");
});

$(function(){
  var staffnames = [
    { value: 'Stephen', data: 's1' },
    { value: 'Klay', data: 's2' },
    { value: 'Draymond', data: 's3' },
    { value: 'Andre', data: 's4' },
    { value: 'Harrison', data: 's5' },
    { value: 'LeBron', data: 's6' },
  ];

  $('#staffsearch').autocomplete({
    lookup: staffnames,
  });
}

这是我的HTML

<form>
  <div id="taskform">
    <input type="text" class="form-control input-sm font11" placeholder="Staff" name="staff" id="staffsearch" value="">
  </div>
  <input type="button" class="btn btn-info input-sm font11 addanother" onlick="duplicate()" id="button" value="Add Another Staff">
</form>

自动完成功能最初有效。但是当我克隆它时，克隆的div / input的自动完成功能不起作用，尽管原始的自动完成仍然有效。

可能与原始和克隆输入的ID相同吗？不知道我是如何解决它的。

非常感谢任何帮助。

乙

Answer 1

也许我误解了但是你想要这样的东西：

https://jsfiddle.net/ye1uzwmg/1/

var staffnames = [{
    value: 'Stephen',
    data: 's1'
  }, {
    value: 'Klay',
    data: 's2'
  }, {
    value: 'Draymond',
    data: 's3'
  }, {
    value: 'Andre',
    data: 's4'
  }, {
    value: 'Harrison',
    data: 's5'
  }, {
    value: 'LeBron',
    data: 's6'
  }, ];

$("#button").click(function() {
  $("#taskform").find("input[type='text']").last().clone().val('').appendTo("#taskform").autocomplete({
    source: staffnames,
  });
});

$(function() {
  $('.staffauto').autocomplete({
    source: staffnames,
  });
});

自动完成无法处理克隆的div

1 个答案: