Javascript 从“选择”下拉列表中添加和删除选项的搜索功能

这是我的疯狂代码：

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行层次结构中的指定点：

我正在做一个项目，就是这样。请查看我的尝试：

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

});

---

我知道这会稍微改变您的流程，但我认为这可能是一个比您现在所做的更好的实现。与其删除元素并将其重新添加到中并进行所有排序，只需对用户隐藏它们就更容易了。

如果不想显示选项，只需隐藏它

第一，来自：

---

你能显示t.config.promoInput吗？你真的不需要.each，只要用一个与你的选择框匹配的查询来替换$v，比如：$'some_container select'我是个白痴。我不知道我为什么要这样做。我正在接手一些在印度编写的供应商代码，这太糟糕了。我正在尝试将他们的方法转换为更好、更具可读性的方法。不幸的是，我没有看到森林中的树木。我真的非常感谢你。我甚至没想到我会得到答案。相反，你想出了一个更好的方法来做事。非常感谢。帮我省了几个小时，不客气。顺便说一句，您至少应该查看转义搜索条件=>\

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
    });
)}