如何定义上下文以使用jQuery Quicksearch搜索？

Question

我在定义要搜索的插件的上下文时遇到问题。

关键是，我有多个输入文本（用户可以从按钮中添加越来越多的文本），而我正在执行以下操作：

$('.inp_txt').quicksearch('ul.myList li');

对于每个输入文本，我都有一个列表，如选择框，在键入时显示结果。 问题是，当用户开始在第一个输入上键入内容时，插件会显示所有其他输入中的所有.myList。 我需要它仅显示用户所在的输入文本中的列表。

我认为我无法为每个列表使用不同的类，而不能为每个列表分别调用插件，因为可以在导航时通过JS添加更多输入。

无论如何，我可以使用$(this)或其他方式定义上下文，因此插件知道其仅在该特定列表中搜索吗？

谢谢！

Answer 1

您遇到的问题是您的语法将单个插件实例应用于选择器中的所有项目。

$('.inp_txt').quicksearch(...)就像调用('.inp_txt').click(...) -您将获得一个处理程序，该处理程序用于匹配的每个元素。

要解决此问题，您需要执行以下操作：

$('.inp_txt').each(function (index, value) {
    var $input = $(value);

    // Get a reference to the list you want for this input...
    var $quickSearch = $('ul.myList li');

    $input.quicksearch($quicksearch);
});

此代码将遍历每个.inp_txt项，并为每个项应用唯一的处理程序。

在您的方案中，听起来好像只有一个ul.myList这可能是您始终看到相同列表的另一个原因。 如果是这样，您可能会考虑类似...

<div>
  <input type="text" class="inp_txt" />
  <ul class="myList">
   <li>...</li>
  </ul>
</div>

然后，您可以将上面的代码修改为类似以下内容的代码：

$('.inp_txt').each(function (index, value) {
    var $input = $(value);
    var $quickSearch = $input.siblings('ul.myList');

    $input.quicksearch($quicksearch);
});

这样，您将获得每个文本框的唯一列表。 显然，我不知道您方案的其余部分是否知道这在您的应用程序逻辑中是否可行-但也许可以。

最后-添加新控件时，您将需要修改创建它们的代码，以便将新的处理程序也附加到它们上。 就像是：

function addInput(/*... params ...*/) {
    /* Do your logic to create the control */
    $newInput.quicksearch($newList);
}

显然，在上面的代码中，假设您将创建一个$newInput元素（它将是新的<input type="text" /> ）和一个新列表，将其称为$newList 。

我希望这会有所帮助-如果没有，请随时发表评论并进行澄清，我将尽力调整我的答案。