如何在调用函数后动态更改变量

Question

我创建了一个带有一组预定义值的 jQuery 自动完成功能。

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

我想做的是，如果用户更改国家/地区，则名称会在 foo.最初它可以工作，但是当我使用 AJAX 调用来更改变量时。但是，即使在那之后，变量仍然保持不变。 （我猜是因为函数不会每次都查看变量，而是只加载一次并重用 foo 第一次调用时的状态。）

所以我尝试同时调用 foo 和 foo-testzt 自动完成功能，希望它会重新加载 foo 的内容。我试过了

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

给函数命名并用国家选择onChange调用它，但它们都不起作用，我仍然得到了初始值。

我正在寻找这个：

用户从选择中选择一个国家。

它的 onchange 进行 AJAX 调用，返回该国家/地区可用城市的列表。

输入字段会使用返回的 AJAX 值加载新的自动完成功能。 （这是不工作的部分。HTML 源代码脚本更改为正确的形式，但自动完成未加载新变量。）

Dynamically changing javascript variable

我也试过这个，虽然它最初仍在运行，但在 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

您可以查看自动完成文档 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/

Answer 2

尝试这样的事情，其中​​ 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 3

为什么不使用您在加载时使用的相同功能？成功后加载响应即可。

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