Question

这是我疯狂的代码：

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。：（

Answer 1

如果您不想展示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
    });
)}

Answer 2

我实际上正在开展一个这样做的项目。看看我的尝试：

 $("#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();
    }

});

我知道这会稍微改变你的过程，但我认为它可能比你正在做的更好。不是删除元素并将它们重新添加（并且必须进行所有排序），而是将它们隐藏起来更容易。

搜索功能添加＆amp;从选择下拉列表中删除选项

2 个答案: