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）;”更改了我调用该函数的每个实例。到“new 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％正确，但它是如何在{{1}中创建 2个locPrep的唯一实例的可靠图示}和<div id="myDiv1">

<div id="myDiv2">

Update2 ：如何传递此

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

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

<强> INIT：

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);
        }
      );
    }
  });
}

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

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

1 个答案: