JQuery自动完成源不更新

Question

我正在使用jquery-ui autocomplete 插件。

这是我实例化自动完成插件的方式。

//autofill
$( "#TextArea" ).autocomplete({
    source: "search.php?option="+ option.toLowerCase(),
    minLength: 3
});

在下拉更改时，我正在尝试更改选项：

$('#Options').on('change',  function() {
        option = this.value.toLowerCase();
        var teaxtarea = $('#TextArea');
        //this is supposed to change the source string when the option value changes.
        teaxtarea.autocomplete( "option", "source", "search.php?option="+ option);
    }
});

我从下面的问题中获得了更新源字符串的代码。

Jquery: Possible to dynamically change source of Autocomplete widget?

但是，这个解决方案似乎对我不起作用。

即使我更改下拉列表中的选项，我仍然会得到第一个选择的选项。 非常感谢任何帮助。

Answer 1

建议如下：

$("#TextArea").autocomplete({
    source: function(req, resp){
      var option = $('#Options option:selected').val().toLowerCase();
      $.ajax({
        cache: false,
        url: "search.php",
        data: {
          option: option,
          term: req.term
        },
        dataType: "json",
        success: function(data){
          resp(data);
        }
      });
    },
    minLength: 3
});

我认为一个问题是，如果#Options 是<select> 元素，则需要找到选中的子元素：

$("#Options option:selected")

这可确保您拥有正确的对象，然后您可以调用 .val() 。如果您在此处需要更多帮助，请使用 MCVE 更新您的帖子：https://stackoverflow.com/help/mcve

这可能会为您解决问题。如果没有，请继续。

其次，为了确保您没有缓存，我们可以执行更手动的源捕获。

使用字符串时，自动完成插件期望该字符串指向将返回 JSON 数据的 URL 资源。它可以在同一台主机上，也可以在不同的主机上（必须支持 CORS）。自动完成插件不过滤结果，而是添加了一个带有 term 字段的查询字符串，服务器端脚本应使用该字段过滤结果。

因此，我们通过添加一些设置来复制相同的功能。因此，每次检查来源时，都会检查选项并发送术语。我们将以 JSON 格式取回数据并发送回 Autocomplete 以进行显示。

希望对您有所帮助。