如何定義上下文以使用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 。

我希望這會有所幫助-如果沒有，請隨時發表評論並進行澄清，我將盡力調整我的答案。