CODEWITHSUNDEEP
jqueryjquery-uiautocompleteappend
blackbird41
blackbird41

Reputation: 3

Issue with appended jQueryUI autocomplete

I am new to javascript and jQuery and I am trying to allow the user to append input fields that utilize jQueryUI autocomplete. The first field works fine but subsequent appended fields do not offer suggestions. 

<!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>

Thanks.

Upvotes: 0

Views: 104

Answers (1)

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62498

you have to initialize it inside click event, it is just getting executed once on 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

Upvotes: 1

Related Questions