时间戳

首页 > 解决方案 > 如何在调用函数后动态更改变量

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

问题描述

我用一组预定义的值创建了一个 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
          }
        });

标签： javascriptjqueryhtmlajax

解决方案

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

推荐阅读