在jQuery自动完成功能中访问$（this）

Question

我正在使用jQuery的自动完成小部件，并尝试在同一页面上的多个元素上使用它，并动态地提取其各自的属性，而不必为每个搜索框进行单独的唯一调用。 每个搜索框都有一类autocomplete-search并包含一些特定于其用例的data属性。

例如：

<input type="text" name="brand" id="brand" class="autocomplete-search" data-search-url="/api/v1/search">
<input type="text" name="product" id="product" class="autocomplete-search" data-search-url="/api/v1/search">

$('.autocomplete-search').autocomplete({
  source: $(this).data("search-url"),
});

但是，这与TypeError: this.source is not a function. (In 'this.source( { term: value }, this._response() )', 'this.source' is null)中断TypeError: this.source is not a function. (In 'this.source( { term: value }, this._response() )', 'this.source' is null) TypeError: this.source is not a function. (In 'this.source( { term: value }, this._response() )', 'this.source' is null) 。 我意识到这个问题类似于jQuery Autocomplete Widget Ajax调用中的Access $（this）DOM元素，但是此处无法接受的答案。 this.element也响应相同的错误。

阅读自动完成文档后，我似乎找不到答案。 任何帮助，将不胜感激。

Answer 1

您正在对多个元素调用autocomplete窗口小部件。

据我所知，您不能告诉窗口小部件为每个元素选择一个动态源。

另一种方法是遍历您的元素，并使用jQuery .each()函数在该循环内调用autocomplete功能：

$('.autocomplete-search').each(function(){
  $(this).autocomplete({
    source: $(this).data("search-url")
  });
});