搜索功能，從下拉菜單中選擇添加和刪除選項

這裏是我的瘋狂代碼：搜索功能，從下拉菜單中選擇添加和刪除選項

t.config.searchSpanInput.keyup(function() { 
    var searchCriteria = t.config.searchSpanInput.val(); 

    $.each (t.config.promoInput, function (i, v) { 
     $.each ($(v + " option"), function (j, v) { 
      if (optObj[i][j].text().toLowerCase().indexOf(searchCriteria.toLowerCase(), 0) === -1) { 
       $(v).remove(); 
      } 

      if (optObj[i][j].text().toLowerCase().indexOf(searchCriteria.toLowerCase(), 0) > -1) { 
       if (optObj[i][j].length === 1) { 
        $(v).append(optObj[i][j][0]); 
       } 
      } 

      if (! optObj[0][0]) { 
       $(v).prepend(optObj[0][0]); 
      } 
     }); 
    }); 
});

所以......所有這一切都試圖做一個稍微簡單的任務。

在頁面加載時，獲取所有選擇框及其所有選項，並將它們存儲在一個數組中。（在我的示例中，這部分代碼未顯示）
在搜索框的鍵控上遍歷所有選擇下拉列表及其選項。 - 如果在搜索框中輸入的文本與存儲在數組選項中的任何文本相匹配，則在選擇下拉列表中保留這些匹配選項。
如果輸入的文本與任何選項都不匹配，請從選擇下拉列表中刪除這些選項。
如果在搜索框中輸入的文本與存儲在數組中的選項中的任何文本相匹配，但它不存在於DOM中，則將其重新添加回去。
最後，請保留所有始終在頂部選擇框。該選項顯示「（全部）」。

任何幫助，將不勝感激。我目前在jquery.min.js的第3行獲得Node cannot be inserted at the specified point in the hierarchy。 :(

來源

2012-01-31 Jesse Atkinson

你可以顯示't.config.promoInput'嗎？ – ShankarSangoli 2012-01-31 21:22:02

如果您不想顯示option，只是隱藏它！

首先，從How do I make jQuery Contains case insensitive, including jQuery 1.8+?：

jQuery.expr[':'].Contains = function(a, i, m) { 
    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 
}; 


t.config.searchSpanInput.keyup(function() { 
    var searchCriteria = t.config.searchSpanInput.val(); 
    $.each (t.config.promoInput, function (i, v) { 
     $(v).find('option').show() // show all options in v. 
      .not(':first-child') // drop first option (All) 
      .not(':Contains("'+searchCriteria +'")') // drop options that match search 
      .hide(); // hide the rest 
    }); 
)}

來源

2012-01-31 21:33:16 ori

你真的不需要'.each'，只需用與你的選擇框匹配的查詢替換'$（v）'，如：'$（'＃some_container select'）' – ori 2012-01-31 21:35:34

我是個白癡。我不知道爲什麼我會像我那樣去談論它。我接管了一些在印度編寫的供應商代碼，這很糟糕。我試圖將他們的方法轉換爲更易讀的方法。不幸的是我沒有看到樹木的森林。 – 2012-01-31 21:59:19

我真的不能非常感謝你。我不認爲我會得到答案。相反，你想出了一個更好的方式來做事。謝謝。節省了我的時間。 – 2012-02-01 14:33:30

實際上，我的工作對只是做這樣的項目檢查出我的嘗試：

$("#filterBox").keyup(function(e) {   
    if($(this).val() === "") { 
     $("option.myOptions").show(); 
    } else { 
     var filter = $(this).val(); 

     $("option.myOptions:contains('" + filter + "')").show(); 
     $("option.myOptions:not(:contains('" + filter + "'))").hide(); 
    } 

});

我知道這改變了你的過程中一點點，但我認爲它可能是一個更好的實現而不是刪除元素並將其添加回去（並且必須完成所有的排序），只是將它們從用戶隱藏起來更容易

來源

2012-01-31 21:31:32 jwegner

搜索功能，從下拉菜單中選擇添加和刪除選項

回答

相關問題