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源代码脚本更改为正确的格式，但是自动完成未加载新变量。）

Dynamically changing javascript variable

在AJAX调用仍未运行的同时，我也尝试了此操作，在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
      }
    });

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

3 个答案: