ASP.NET Core MVC Controls | ComponentOne
Working with Controls / Input Controls / MultiSelect / Work with MultiSelect / MultiSelect Filter
In This Topic
    MultiSelect Filter
    In This Topic

    MultiSelect is a simple drop-down control with checkable options which allows you to select or deselect an item with a single click. However, it might become a tedious task to select items from a long list. So, MultiSelect provides a search element that can filter the items from the list as you type. It provides the ShowFilterInput property that can be used to display a filter input above the items to filter the items displayed in the control. In addition, MultiSelect also provides the CheckOnFilter property that determines whether the control should automatically select all the filtered items when the filter text changes.

    Filtering items from smaller set of options in MultiSelect control.

    The following example shows how you can use the ShowFilterInput and CheckOnFilter properties to filter items from a smaller set of options.

    Add Model

    Countries.cs
    Copy Code 
    public class Countries
{
    public static List<string> GetCountries()
    {
        return new List<string>
        {
            "Afghanistan", "Albania", "Algeria", "American Samoa", "Andorra", "Angola", "Anguilla", "Antigua", "Argentina", "Armenia",
    "Aruba", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize",
    "Benin", "Bermuda", "Bhutan", "Bolivia", "Bonaire", "Bosnia", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burundi",
    "Cambodia", "Cameroon", "Canada", "Canary Islands", "Cape Verde", "Cayman Islands", "Central African Republic", "Chad", "Channel Islands",
    "Chile", "China", "Christmas Island", "Cocos Island", "Colombia", "Comoros", "Congo", "Cook Islands", "Costa Rica", "Cote D'Ivoire",
    "Croatia", "Cuba", "Curacao", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "East Timor", "Ecuador",
    "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Falkland Islands", "Faroe Islands", "Fiji", "Finland",
    "France", "French Guiana", "French Polynesia", "French Southern Ter", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Gibraltar",
    "Great Britain", "Greece", "Greenland", "Grenada", "Guadeloupe", "Guam", "Guatemala", "Guinea", "Guyana", "Haiti", "Honduras",
    "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Isle of Man", "Israel", "Italy", "Jamaica", "Japan",
    "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Korea North", "Korea South", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho",
    "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macau", "Macedonia", "Madagascar", "Malaysia", "Malawi", "Maldives",
    "Mali", "Malta", "Marshall Islands", "Martinique", "Mauritania", "Mauritius", "Mayotte", "Mexico", "Midway Islands", "Moldova", "Monaco",
    "Mongolia", "Montserrat", "Morocco", "Mozambique", "Myanmar", "Nambia", "Nauru", "Nepal", "Netherland Antilles", "Netherlands", "Nevis",
    "New Caledonia", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Niue", "Norfolk Island", "Norway", "Oman", "Pakistan", "Palau Island",
    "Palestine", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Pitcairn Island", "Poland", "Portugal", "Puerto Rico",
    "Qatar", "Republic of Montenegro", "Republic of Serbia", "Reunion", "Romania", "Russia", "Rwanda", "St Barthelemy", "St Eustatius",
    "St Helena", "St Kitts-Nevis", "St Lucia", "St Maarten", "Saipan", "Samoa", "Samoa American", "San Marino", "Saudi Arabia", "Scotland",
    "Senegal", "Serbia", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa",
    "Spain", "Sri Lanka", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Tahiti", "Taiwan", "Tajikistan", "Tanzania",
    "Thailand", "Togo", "Tokelau", "Tonga", "Trinidad Tobago", "Tunisia", "Turkey", "Turkmenistan", "Turks & Caicos Is", "Tuvalu", "Uganda",
    "Ukraine", "United Arab Emirates", "United Kingdom", "United States of America", "Uruguay", "Uzbekistan", "Vanuatu", "Vatican City State",
    "Venezuela", "Vietnam", "Virgin Islands (British)", "Virgin Islands (USA)", "Wake Island", "Yemen", "Zaire", "Zambia", "Zimbabwe"
        };
    }
}

    Add Controller

    FilterController.cs
    Copy Code 
    public IActionResult Index()
{
    return View(Countries.GetCountries());
}

    Add View for the Controller

    Index.cshtml
    Copy Code 
    @using MultiSelect_Core.Models

@{
    List<string> country = Countries.GetCountries();
}
@section Scripts{
    <script>
    var checkedItemsChanged = function (sender, e) {
        var i, result = document.getElementById("result"),
            items = sender.checkedItems;

        if (result) {
            result.innerHTML = "";
        }

        for (i = 0; i < items.length; i++) {
            result.innerHTML += "<span>" + (i + 1) + ". " + items[i] + "<\/span><br>";
        }
    }
    </script>
}

<div>
    <label>Select Countries: </label>

    <c1-multi-select id="multiselect" placeholder="Plesae select countries" header-format="{count} countries selected" checked-items-changed="checkedItemsChanged"
                     filter-input-placeholder="Filter Input"
                     show-filter-input="true"
                     check-on-filter="true">
        <c1-items-source source-collection="country" />
    </c1-multi-select>

    <label>Select results:</label>
    <div id="result"></div>
</div>