Kendo UI MultiSelect, 連搜尋的功能都有，方便又好用~~

有時候我們會遇到一個需求，某個選項是可以複選的，並且希望還要附帶可以搜尋的功能，如果要手刻的話…實在是個大工程，今天要介紹一下Kendo UI的MultiSelect元件，輕鬆的就可以做到這件事囉~~
官網說明

1. 首先一樣要加加入Kendo UI的css和js，就不額外說明了

2.  加入tag
<select id="PeopleCC" name="PeopleCC" multiple="multiple" ></select>

3. 加入js

$("#PeopleTO").kendoMultiSelect({
                placeholder: "Select employee...",
                dataTextField: "Display",
                dataValueField: "Id",
                autoBind: false,
                filter: 'contains',
                dataSource: {
                    type: "json",
                    transport: {
                        read: {
                            type: "POST",
                            dataType: "json",
                            contentType: "application/json",
                            url: "/Alarm/GetMutiSelect",
                        }
                    }
                }
                //value: [
                //    { ProductName: "Chang", ProductID: 2 },
                //    { ProductName: "Uncle Bob's Organic Dried Pears", ProductID: 7 }
                //]
            });

如果是一到這個頁面，就要自動進行Binding的話autoBind要記得改成true，例如在要編輯資料時，需要預設從db取出上次選擇的資料，這時如果沒有將autoBind改為true的話，MultiSelect會一直沒有資料可以選擇，因為MultiSelect是當第一次使用者點了它之後，才去做binding的動作，如果裡面已經有填資料進去，就不會binding囉

filter: 'contains'，這個選項就是開啟搜尋的功能
value: 如果需要預設值，就可以在value裡設定

使用方法非常簡單，到目前為止小艾差不說試了4、5種Kendo UI的元件了，用法上大同小異，就是設好datasource，然後指給tag就對了