Filter and Search ASP.Net DropDownList items using JavaScript

The post is originally from http://www.aspsnippets.com/Articles/Filter-and-Search-ASP.Net-DropDownList-items-using-JavaScript.aspx
have update to object oriented.
We just have to create object for each filter, and alter the function FilterItemsByText

//http://www.aspsnippets.com/Articles/Filter-and-Search-ASP.Net-DropDownList-items-using-JavaScript.aspx
//https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith
function CacheItems(ddl, lblMessage) {
    this.ddlText = new Array();
    this.ddlValue = new Array();
    this.ddlTempItems = ddl;
    this.lblMesg = lblMessage;
    this.hasDefault = false;
    this.DefaultOption = new Option("", "");

    if (typeof this.ddlTempItems === 'undefined' || typeof this.ddlTempItems.options === 'undefined' || this.ddlTempItems.options.length == 0)
        return;

    //http://jsperf.com/jquery-each-push-vs-filter-map/2
    for (var i = 0; i < this.ddlTempItems.options.length; i++) {
        this.ddlText[this.ddlText.length] = this.ddlTempItems.options[i].text;
        this.ddlValue[this.ddlValue.length] = this.ddlTempItems.options[i].value;
    }
}

CacheItems.prototype.AddItems = function (text, value, index) {
    var options = new Option(text, value);

    if (typeof this.ddlTempItems === 'undefined'
        || typeof this.ddlTempItems.options === 'undefined'
        )
        return;

    if (this.hasDefault && this.DefaultOption.value != "" && !this.HasOption(this.DefaultOption.value)) {
        this.ddlTempItems.options.add(this.DefaultOption);
    }

    if (index === -1) {
        this.ddlTempItems.options.add(options);
        return;
    }

    if (index === 0 && this.ddlTempItems.options[0].text.toLowerCase() != text.toLowerCase()) {
        this.ddlTempItems.options.add(options, this.ddlTempItems[0]);
    }
}

CacheItems.prototype.RemoveItems = function (text, value) {
    var options = new Option(text, value);

    if (typeof this.ddlTempItems === 'undefined'
        || typeof this.ddlTempItems.options === 'undefined'
        )
        return;

    if (this.ddlTempItems.options[0].text.toLowerCase() == text.toLowerCase())
        this.ddlTempItems[0] = null;
}

CacheItems.prototype.HasOption = function (value) {
    for (var i = 0, len = this.ddlTempItems.options.length; i != len; ++i) {
        if (this.ddlTempItems.options[i].value == value) {
            return true;
        }
    }
    return false;
}

function FilterItems(value, objCacheItem) {

    AddProtoTypes();

    objCacheItem.ddlTempItems.options.length = 0;//Clear the dropdown

    for (var i = 0; i < objCacheItem.ddlText.length; i++) {
        //if (objCacheItem.ddlText[i].toLowerCase().indexOf(value) != -1) {//Contains 
        if (objCacheItem.ddlText[i].toLowerCase().StartsWith(value, 0)) {//Contains 
            objCacheItem.AddItems(objCacheItem.ddlText[i], objCacheItem.ddlValue[i], -1);
        }
    }

    //when no element found
    if (objCacheItem.ddlTempItems.options.length == 0 && objCacheItem.hasDefault) {
        objCacheItem.ddlTempItems.options.add(objCacheItem.DefaultOption);
    }

    objCacheItem.lblMesg.innerHTML = value == "" ? "" :
        objCacheItem.ddlTempItems.options.length + (objCacheItem.hasDefault ? -1 : 0) + " items found.";

    objCacheItem.ddlTempItems[0].selected = true;
}

function AddProtoTypes() {
    if (!String.prototype.StartsWith) {
        String.prototype.StartsWith = function (searchString, position) {
            position = position || 0;
            return this.indexOf(searchString, position) === position;
        };
    }
}

    
        
            

                

                    
Customer
                    


                        

                        

                            

                        

                        
                    
Project