附加的jQueryUI自动完成问题

时间:2014-07-15 03:28:03

标签: jquery jquery-ui autocomplete append

我是javascript和jQuery的新手,我试图允许用户附加使用jQueryUI自动完成的输入字段。第一个字段工作正常,但后续附加字段不提供建议。

<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "/jquery-ui/development-bundle/themes/base/jquery-ui.css">
<script src = "/jquery/jquery.min.js"></script>
<script src = "/jquery-ui/js/jquery-ui-1.10.4.custom.js"></script>
<script>
var instance = 1;
$(document).ready(function(){
  $("#btn1").click(function(){
    instance++;
    $("#div1").append('<br><input name = "country'+instance+'" id = "country'+instance+'">');
  });

  $("#country"+instance).autocomplete({
    source: "country.php",
    minLength: 2,
  });
});
</script>
</head>
<body>
<div id = "div1">
  <div class = \"ui-widget\">
  <input name = "country1" id = "country1">
  </div>
</div>
<button id="btn1">add stuff</button>
</body>
</html>

感谢。

1 个答案:

答案 0 :(得分:1)

你必须在点击事件中初始化它,它只是在document.ready()执行一次:

$("#btn1").click(function(){
    instance++;
    $("#div1").append('<br><input name = "country'+instance+'" id = "country'+instance+'">');

    $("#country"+instance).autocomplete({
    source: "country.php",
    minLength: 2,
    });

  });

FIDDLE EXAMPLE