Autocomplete not working when the data is dynamically created using on click of the textbox

Autocomplete not working when the data is dynamically created using on click of the textbox

Hi All,
 
I Have a Strange problem going on for weeks and I don't know how to fix it.
 
I have two text boxes City and Area which needs to show autocomplete.
 
While the page loads, Im taking all the city which I need from database and saving it in an arraylist.
 
So when the user types a City, the autocomplete works perfectly.
 
Problem comes after this, based on the City the user has choosen, when he clicks the Area textbox, Im making an ajax call and getting the areas for the city in from the database and saving it in an arraylist.
But when the user types the area, autocomplete is not working even though values are present in the araylist.
I am sure the ajax call works fine as I gave alert and checked the values.
 
I am not sure whether autocomplete works before the ajax call itself or something else is going wrong.
 
Please help me to solve this problem.
 
Thanks in Advance.
 
 
 
  1. <script>

  2. var list;
    var list1;
    var list2;
    var a;
  3. $(document).ready(function(){
  7. $('.area').click(function() {
  8.      var id = $(this).attr('id');
         var city = id.replace('PRODUCER', 'BRANCH');
         var cityvalue = $('#' + city).val();

  9.      if(cityvalue.length!=3){
        
         alert('cityvalue field cannot be left empty\nPlease enter Branch');
          $('#' + city).focus();
          return true;
         }
       
     $.get('<%=request.getContextPath()%>/CsGateway?viewName=view1&&actionName=action1&&dow='+document.getElementById('<%=CiViewBeanKeys.dow%>').value+'&&cityvalue='+cityvalue,function(data,status){
     
  10.  
  11. list =data.split("&&")[0];
     
     
     
    list1= $.trim(list);
  12. a = $.parseJSON(list1);
  15.  });
     
  16.    
       
       
    });

  17.  

  18. });
  21. var city =[
    <% for(int a = 0;a<branch.size();a++){
    cvCity obj = (cvCity)branch.get(a);
  22. %>
  23.  '<%= obj.cityList() %>'
     
     <% if(a<branch.size()-1){ %>
     ,
    <%} %>
  24. <% } %>]
  25. <!-- Autocomplete -->
     
     $(function () {
        $(".city").autocomplete({
       
            source: function (request, response) {
                var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
                response($.grep(city, function (item) {
                    return matcher.test(item);
                }));
            },
            minLength: 1
            });
           
     
  26.  $(".area").autocomplete({
  27.         source: function (request, response) {
                var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
                response($.grep(a, function (item) {
                    return matcher.test(item);
                }));
            },
            minLength: 3   
               
          
        }); 
     
     
         
    });