javascript - 搜索功能可从选择下拉列表中添加和删除选项

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

如果您不想显示选项，只需将其隐藏即可!

首先，来自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
    });
)}