How to store ajax response into a jquery variable being used in html in textbox

Question

Here is my gist of code: https://gist.github.com/anuragk098/3e11673136325b5e5b1859bde11f2117 Here is my page: http://abachelorskitchen.com/

In the 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 function:

function getarea(city){
                $.ajax({
                    url: '<?php echo base_url()?>Home/getArea',
                    type: 'POST',
                    data: {id: city},

                    success: function(data) {
                    area = data;
                    }
                });
                }

now area variable contains string like 'area1', 'area2'. And another jquery method from where i am fetching areas:

$(document).ready(function() {      
        $('.select2').select2();
        });

              $( function() {
                var availableTags = [area];
                $( "#tbCountries" ).autocomplete({
                  source: availableTags
                });
              } );

Check gist for all the codes and page link to better understand the functionality I want to achieve.

Answer 1

If you want autocomplete the second input according to the selection in the first input, you could just init an autocomplete for the second input (tbCountries) like you did for the first one (tbCountries1), but give the autocomplete source option as a function like so:

$('#tbCountries1').autocomplete(
{
  /* Other options here */
  source: function(request, response)
  {
    /* Fetch the the data using request.term and value from tbCountries1 */
    var options = getarea($("#tbCountries1").val());
    /* Then return the array to the callback */
    response(options);
  }
});

More info about the source option here: http://api.jqueryui.com/autocomplete/#option-source

EDIT:

Ok. I'll try to explain my idea more. For the first input field you could add a list of all the cities you support. You have defined variable

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

that you insert into the first autocomplete like this:

source : months,

For the second input, you could create similar autocomplete but instead of passing that months-variable, you could use a function to create an array of localities dynamically based on the selected city. So for the second input, you would do the following:

$("#tbCountries").autocomplete(
{
  /* Other options here */
  source: function(request, response)
  {
    /* Here we pass the selected city, the searched locality and */
    /* the callback for the autocomplete */
    getarea($("#tbCountries1").val(), request.term, response);
  }
});

And you'd edit the getArea-function as follows:

function getarea(city, searched, response)
{
  $.ajax(
  {
    url: '<?php echo base_url()?>Home/getArea',
    type: 'POST',
    data:
    {
      id: city
    },
    success: function(options)
    {
      /* If the options is not an array, you need to convert it to one here */
      var optionsFiltered = $.ui.autocomplete.filter(options, searched);
      response(optionsFiltered);
    }
  });
}