Search function to add & remove options from select dropdown
<p>Here is my crazy code:</p>

<pre><code>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) &gt; -1) {
                if (optObj[i][j].length === 1) {
                    $(v).append(optObj[i][j][0]);
                }
            }

            if (! optObj[0][0]) {
                $(v).prepend(optObj[0][0]);
            }
        });
    });
});
</code></pre>

<p>So... All of that is trying to do a somewhat simple task.</p>

<ul>
<li>On page load get all of the select boxes and all of their options and store them in an array. (this part of the code isn't shown in my example)</li>
<li>On keyup of the search box iterate through all of the select dropdowns and their options. - If the text entered in the search box matches any of the text stored in the options in the array then leave those matching options in the select dropdown.</li>
<li>If the text entered does not match any options, remove those options from the select dropdown.</li>
<li>If the text entered in the search box matches any of the text stored in the options in the array, but it does not exist in the DOM, add it back in.</li>
<li>Lastly, keep the top option in all the select boxes always on top. This option says "(All)".</li>
</ul>

<p>Any help would be appreciated. I'm currently getting a <code>Node cannot be inserted at the specified point in the hierarchy</code> on line 3 of jquery.min.js. :(</p>
