here is my gist of code: https://gist.github.com/anuragk098/3e11673136325b5e5b1859bde11f2117

here is my page: http://abachelorskitchen.com/

in first text box i am getting all the cities from a jquery function

    var months = [<?=$city;?>];

$('#tbCountries1').autocomplete({

source : months,

minLength: 0,

minChars: 0,

max: 12,

autoFill: true,

mustMatch: true,

matchContains: false,

scrollHeight: 220,

formatItem: function(data, i, total) {

if ( data[0] == months[new Date().getMonth()] ) 

return false;

return data[0];

}

}).on('focus', function(event) {

var self = this;

$(self).autocomplete( "search", "");;

});

and onblur i am calling an ajax function which fetch all the areas in that city.

but now i want all that areas in another jquery function from which area textbox will show results

Ajax funxtion:

    function getarea(city){

$.ajax({

url: '<?php echo base_url()?>Home/getArea',

type: 'POST',

data: {id: city},

success: function(data) {

availableTags = data;

}

});

}

and another jquery method from where i am fetching areas

    $(document).ready(function() {

$('.select2').select2();

});

           

 $( function() {

var availableTags = ['sample area1', 'sample area2'];

$( "#tbCountries" ).autocomplete({

 source: availableTags

});

 } );

check gist for all the codes and page link to better understand the functionality i want to achieve.

please make answer as simple as possible