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。< / p>

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

如何使用jquery Quicksearch定义要搜索的上下文？

1 个答案: