Как динамически изменять переменные после вызова функции

Question

Я создал автозаполнение jQuery с набором предопределенных значений.

$(function() {
    var foo = [
        "bar",
        "baz"
    ];
    $( "#foo-teszt" ).autocomplete({ source: foo });
});

Что я хотел бы сделать, так это то, что если пользователь меняет страну, имена меняются в foo. Первоначально это работает, но когда я использую AJAX-вызов для изменения переменных. Однако даже после этого переменная остается прежней. (Я полагаю, потому что функция не смотрит на переменную каждый раз, но загружает только один раз и повторно использует foo то состояние, в котором она была при первом вызове.)

Поэтому я попытался вызвать автозаполнение foo и foo-teszt в надежде, что оно перезагрузит содержимое foo. Я попробовал это с

$( function() {
    var foo = [
        "bar",
        "baz"
    ];
    $( "#foo-teszt" ).autocomplete({ source: foo });
})();

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

Я ищу это:

Пользователь выбирает страну из списка избранных.

Onchange совершает AJAX-вызов, который возвращает список доступных городов в этой стране.

И поле ввода загружает новое автозаполнение с возвращенными значениями AJAX. (Эта часть не работает. Сценарий исходного кода HTML изменяется на правильную форму, но автозаполнение не загружается с новыми переменными.)

Динамически изменяемая переменная javascript

Я также попробовал это, пока он еще работал изначально, после вызова AJAX я все еще не вызывал его с помощью onchange или внутри самого AJAX.

AJAX - это jQuery, подобный этому.

$.ajax({ //jadajada
          url: "url",
          type: "post", //send it through get method
          data: {
            method: "baz",
            foo: bar
          },
          success: function(response) {
              document.getElementById("bal").innerHTML = response;
          },                                                              
          error: function(xhr) {
            //Do Something to handle error
          }
        });

Answer 1

Попробуйте что-то вроде этого, где newSet - это новый набор предопределенных имен

$.ajax({ //jadajada
url: "url",
type: "post", //send it through get method
data: {
  method: "baz",
  foo: bar
},
success: function(response) {
    document.getElementById("bal").innerHTML = response;
$( "#autocomplete" ).autocomplete('option', 'source', newSet)
},                                                              
error: function(xhr) {
  //Do Something to handle error
}
});

Answer 2

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

$.ajax({ //jadajada
      url: "url",
      type: "post", //send it through get method
      data: {
        method: "baz",
        foo: bar
      },
      success: function(response) {
          $( "#foo-teszt" ).autocomplete({
                source: response
              });
      },                                                              
      error: function(xhr) {
        //Do Something to handle error
      }
    });

Answer 3

Вы можете проверить API документации автозаполнения, вы найдете способ динамического изменения источника данных:

https://api.jqueryui.com/autocomplete/#option-source

$( ".selector" ).autocomplete( "option", "source", [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] );

для вашего случая, инициализировать автозаполнение, а затем выполнить запрос, который вернет новый набор параметров:

$( function() {
   var foo = [
     "bar",
     "baz"
   ];
   $( "#foo-teszt" ).autocomplete({
     source: foo
   });
});

как то так:

$.ajax({ //jadajada
url: "url",
type: "post", //send it through get method
data: {
  method: "baz",
  foo: bar
},
success: function(myNewSource) {        
    $("#foo-teszt").autocomplete('option', 'source', myNewSource)
}                                                                  
});

РЕДАКТИРОВАТЬ : Добавить рабочий пример

$(function() {
  var json_data = JSON.stringify(["zz", "zzz", "sdf"]);


  var availableTags = [
    "ab",
    "abc",
    "ac"
  ];
  $("#tags").autocomplete({
    source: availableTags,
    search: null
  });


  $("#btn").on("click", function(e) {
    $.ajax({
      type: "POST",
      url: '/echo/json/',
      data: {
        json: json_data,
        delay: 0
      },
      success: function(response) {
        console.log(response);
        $("#tags").autocomplete({
          source: response,
          search: null
        });
      },
      dataType: "JSON"
    });


  });
});

https://jsfiddle.net/sfn8pd3a/