Как хранить АЯКС ответа в переменный JQuery используется в HTML в текстовом поле

Question

Вот моя суть коды: https://gist.github.com/anuragk098/3e11673136325b5e5b1859bde11f2117 Вот моя страница: http://abachelorskitchen.com/

В первом текстовом поле я получаю все города от функция JQuery:

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", "");; 
      }); 

и ONBLUR Я вызываю функцию Ajax, которая выборки всех областей в этом городе. Но теперь я хочу, чтобы все области в другой функции jquery, из которых текстовое поле области отображало результаты.

Ajax функции:

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

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

Теперь переменная область содержит строку как 'Area1', 'AREA2'. И еще один метод JQuery откуда я выборка области:

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

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

Проверить суть для всех кодов и ссылки на странице, чтобы лучше понять функциональные возможности, я хочу достичь.

Answer 1

Если вы хотите, чтобы автозавершить второй вход в соответствии с выбором на первом входе, вы можете просто запустить автозаполнение для второго входа (tbCountries), как и для первого (tbCountries1), но указать параметр источника автозаполнения как функция, как так:

$('#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); 
    } 
}); 

более подробная информация о возможности источника здесь: http://api.jqueryui.com/autocomplete/#option-source

EDIT:

Ок. Я попытаюсь объяснить свою идею больше. Для первого поля ввода вы можете добавить список всех городов, которые вы поддерживаете. Вы определили переменной

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

, что вы вставляете в первое автозаполнение, как это:

source : months, 

Для второго входа, вы можете создать подобное автозаполнение, но вместо того, чтобы мимоходом, что месяц-переменный, вы могли бы использовать функция для создания массива локаций, динамически основанная на выбранном городе. Таким образом, для второго входа, вы должны сделать следующее:

$("#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); 
    } 
}); 

И вы бы редактировать GetArea-функцию следующим образом:

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); 
    } 
    }); 
}