JQuery 自动完成 - 如何在不使用 id 的情况下根据附近的 DOM 元素控制列表？

Question

这是在 JQuery 中，使用自动完成功能的 JQuery-UI 版本

我的处境有点极端。我正在一个必须无限期可克隆的表单中工作，因此我不能使用 id 标签进行唯一标识，并且我不能只是从顶部向下搜索来查找类似于我正在使用的 DOM 元素的内容- 我必须使用相对函数(.closest、.find 等)。在这个表单中，我设置了一个国家/地区字段、一个州/省/市/自治区字段和一个位置字段，并且位置字段应该是自动完成的，从链接提供，它在其中提供国家/地区和州字段的当前值在用于服务器端过滤的链接上。我希望它像这样:

function locPrep(locNode) {
  $locNode.autocomplete({
    source: function (request, response) {
      $locDiv = $(this).closest("div.locWrapper");
      $stateNode = $locDiv.find("input.state");
      $countryNode = $locDiv.find("input.country");
      $.post("/FormHost/AutocompleteLocList",
        {state:$stateNode.val(), country:$countryNode.val(), term:request.term },
        function (data) {
          response(data);
        }
      );
    }
  });
}

...除了这不起作用，因为源函数的 $(this) 不是 locNode，而且我不能只在外部声明它并在内部使用它，因为 locPrep 被重复调用，每个调用一次自动填写表格。如果我尝试这样做，Jquery 使所有内容都全局化这一事实会导致表单中的所有自动填充引用最后一个字段的国家/地区和州字段。我尝试使用 javascript vars 来解决范围问题，但它奇怪地崩溃了。有人可以帮忙吗？

<小时/>

编辑:感谢 Dmitriy Naumov 的善意帮助，我能够敲定一个有效的解决方案(尽管考虑到我尝试过的一些事情，我仍然不完全确定为什么它有效)没有)。我包含了功能代码，希望它可以对其他人有所帮助。 (我确实从其他人回答的问题中获益匪浅。)

首先，我检查并更改了从“locPrep(foo);”调用该函数的每个实例。到“新的 locPrep(foo);”我还将其更改为采用 locDiv 而不是 locNode。然后，我将代码更改为以下内容(尽管这是一个稍微简化的版本)。

function locPrep(locDiv) {
  $locNode = $(locDiv).find("input.locationAutofill")
  $locNode.autocomplete({
    source: function (request, response) {
      var stateVar = $(locDiv).find("input.state").val();
      var countryVar = $(locDiv).find("input.country").val();
      $.post("/FormHost/AutocompleteLocList",
        {state:stateVar, country:countryVar, term:request.term },
        function (data) {
          response(data);
        }
      );
    }
  });
}

我不完全确定其中哪些部分是必要的，但作为一个团队，他们对代码进行了精心处理，以使用足够严格的范围来解决问题。

Answer 1

将 $(this) 保存到变量并将其作为参数 (locNode) 传递给函数(在初始化期间)。此外，您可以传递指向容器元素的链接，而不是 $(this)，因此每个初始化的自动完成都会知道其父元素。

更新:以下内容在自动完成初始化方面可能不是 100% 正确，但它很好地说明了如何在 <div id="myDiv1"> 中创建 2 个唯一的 locPrep 实例和<div id="myDiv2">

myContainer1 = $('#myDiv1');
myContainer2 = $('#myDiv2');

myAutocompleteInstance1 = new locPrep(myContainer1);
myAutocompleteInstance2 = new locPrep(myContainer2);

Update2:如何传递this

function locPrep(locNode, currentThis) {

 /// use currentThis instead of $(this) inside locPrep function

  $locNode.autocomplete({
    source: function (request, response) {
      $locDiv = currentThis.closest("div.locWrapper");
      $stateNode = $locDiv.find("input.state");
      $countryNode = $locDiv.find("input.country");
      $.post("/FormHost/AutocompleteLocList",
        {state:$stateNode.val(), country:$countryNode.val(), term:request.term },
        function (data) {
          response(data);
        }
      );
    }
  });
}

初始化:

myAutocompleteInstance1 = new locPrep(myContainer1, $(this));

new 将确保 currentThis 的值在 locPrep 的每个实例中都是唯一的