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：可以动态更改自动完成小部件的源吗？

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

即使我更改下拉列表中的选项，我仍然会获得第一个选定的选项。

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()

。

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

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

使用字符串时，自动完成插件期望该字符串指向将返回 JSON 数据的 URL 资源。它可以位于同一主机或不同主机上（必须支持 CORS）。自动完成插件不会过滤结果，而是添加带有

term

字段的查询字符串，服务器端脚本应使用该字段来过滤结果。

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