如何定义要使用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。

我希望这能有所帮助——如果没有，请随时发表一些评论和澄清，我会努力调整我的答案。