Overview of how filtering using a dropdown search for a listbox in asp.net

ListBoxTableFilter.js

function search(e) {
    var id = e.target.id;
    var val = document.getElementById(id).value.toUpperCase();
    var grid = document.getElementById("ct100_ContentPlaceHolder1_dropdownListings");
    
    $('#ctl00_ContentPlaceHolder1_dropdownListings').find('tbody').find('tr').each(function (index, element) {
        var blah = $(this).text().toUpperCase();
        if ($(this).text().toUpperCase().indexOf(val) < 0)
            $(this).hide();
        else
            $(this).show();
    });


}

//function search(e) {
//    var id = e.target.id;
//    var searchtext = document.getElementById(id).value;
//    var regex = new RegExp("^" + searchtext + "\w*");

//    var listbox = document.getElementById("ContentPlaceHolder1_lsbxAttributeChoiceValuesList");
//    var listboxChildren = listbox.children;
//    var children = [];

//    for (var i = 0; i < listboxChildren.length; i++)
//        children.push(listboxChildren[i].text);

//    var negResults = [];

//    for (var i = children.length - 1; i >= 0; i--) {
//        var text = children[i];
//        if (!regex.test(text)) {
//            negResults.push(text);
//            listbox.remove(i);
//        }
//    }

//    var spanMatches = [];
//    var spanNonmatches = [];

//    var hiddenSpan = document.getElementById("hiddenSpan");
//    var hiddenSpanText = hiddenSpan.innerHTML.toString();

//    if (hiddenSpanText != "") {
//        var textArray = hiddenSpanText.split(",");
//        for (var i = 0; i < textArray.length; i++) {
//            if (regex.test(textArray[i]))
//                spanMatches.push(textArray[i]);
//            else
//                spanNonmatches.push(textArray[i]);
//        }
//    }

//    var nonmatches = spanNonmatches.concat(negResults);
//    hiddenSpan.innerHTML = nonmatches.toString();

//    spanMatches.forEach(function (index) {
//        listbox.add(new Option(index));
//    });

//    if (listbox.children.length == 0) {
//        var addBtn = document.getElementById("ContentPlaceHolder1_btnAdd");
//        addBtn.style.visibility = "visible";
//        addBtn.disabled = false;
//        var label = document.getElementById("ContentPlaceHolder1_lbldoesNotExist")
//        label.style.visibility = "visible";
//    }
//    else {
//        var addBtn = document.getElementById("ContentPlaceHolder1_btnAdd");
//        addBtn.style.visibility = "hidden";
//        addBtn.disabled = true;
//        var label = document.getElementById("ContentPlaceHolder1_lbldoesNotExist")
//        label.style.visibility = "hidden";
//    }
//}