2

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

问题是，我有多个输入文本（用户可以从一个按钮添加越来越多），我正在做这样的事情：

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

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

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

无论如何我可以定义上下文，使用$(this)或其他东西，所以插件知道它只在那个特定的列表中搜索？

谢谢！

4

1 回答 1

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.

我希望这会有所帮助 - 如果没有，请随时发表一些评论并澄清，我会尝试调整我的答案。

于 2012-12-03T17:56:10.557 回答