javascript - 剣道グリッドで検索バーを作成するには?

Question

値を入力すると自動的にグリッドで検索されるように、剣道グリッドの列に検索バーを作成したいですか? ここに私の HTML と JavaScript コードがありますか?

    $(document).ready(function () {
        var selectedRow = null;

        dataSource = new kendo.data.DataSource({
            transport: {
                batch: true,

                read: function (options) {
                    $.ajax({
                        url: "/api/Companies/GetAllCompanies2",
                        type: "GET",
                        dataType: "json",
                        cache: false,
                        crossDomain: true,
                        processData: true,
                        contentType: "application/json; charset=utf-8",
                        async: true,


                        success: function (result) {
                            options.success(eval(result));

                        },
                        error: function (xhr, status, error) {
                            alert(error.responseTextss);
                        }
                    });
                },



            },
            error: function (e) {

                alert("Status: " + e.status + "; Error message: " + e.errorThrown);
            },
            batch: false,
            pageSize: 20,

            schema: {
                model: {
                    fields: {
                        Id: { type: "int" },
                        CurrentCurrencyCode: { editable: true, type: "int" },
                        ShortName: { editable: true, type: "string" },
                        FullName: { editable: true, type: "string" },
                        ContactPerson: { editable: true, type: "string" },
                        Address1: { editable: true, type: "string" },
                        CompanyCity: { editable: true, type: "string" },
                        CompanyState: { editable: true, type: "string" },
                        CompanyCountry: { editable: true, type: "string" },
                        ZipPostCode: { editable: true, type: "string" },
                        TelArea: { editable: true, type: "string" }

                    }
                }
            }
        });



        var grid = $("#grid").kendoGrid({
            change: function (e) {
                selectedRow = this.select();
                var item = this.dataItem(selectedRow);
                kendo.bind($("#gridEditor"), item);
            },
            dataSource: dataSource,
            selectable: true,

            pageable: true,
            height: 500,
             filterable: {
                mode: "row"
            },
            columns: [{ field: 'Id', width: '150px' },
                {
                    field: 'CurrentCurrencyCode', width: '145px', filterable: {
                cell: {  operator: "contains" }
            }},
     ],
        }).data("kendoGrid");

    });

</script>
<ul class="nav nav-pills nav-stacked">

</ul>
<div id="grid"

     style="  margin-left: 196px; width: 50%; "></div>

<script type="text/javascript">


    function updatedb() {
        var id = document.getElementById('id').value;
        var ccco = document.getElementById('ccco').value;
        var sn = document.getElementById('sn').value;
        var fn = document.getElementById('fn').value;
        var cp = document.getElementById('cp').value;
        var add = document.getElementById('add').value;
        var cci = document.getElementById('cci').value;
        var cs = document.getElementById('cs').value;
        var cco = document.getElementById('cco').value;
        var zpc = document.getElementById('zpc').value;
        var tl = document.getElementById('tl').value;

        $.ajax({

            url: "/api/Companies/SaveDefCompny",

            type: "POST",
            data: '{Id: "' + id + '",CurrentCurrencyCode: "' + ccco + '",  ShortName: "' + sn + '" , FullName: "' + fn + '", ContactPerson: "' + cp + '", Address1: "' + add + '",  CompanyCity: "' + cci + '",  CompanyState: "' + cs + '",CompanyCountry: "' + cco + '",ZipPostCode: "' + zpc + '",TelArea: "' + tl + '"}',
            dataType: "json",
            cache: false,
            crossDomain: true,
            processData: true,
            contentType: "application/json; charset=utf-8",
            async: true,


            success: function (result) {
                options.success(eval(result));

            },
            error: function (xhr, status, error) {
                alert(error.responseTextss);
            }
        });



    }


</script>

<form >
    <div id="gridEditor" style="margin-left: 956px; margin-top: -500px; ">

        <input id="ccco" type="text" name="ItemName" class="k-textbox" data-bind="value: CurrentCurrencyCode"><br />
        <input id="sn" type="text" name="ItemName" class="k-textbox" data-bind="value: ShortName"><br />
        <input id="fn" type="text" name="ItemName" class="k-textbox" data-bind="value: FullName"><br />
        <input id="cp" type="text" name="ItemName" class="k-textbox" data-bind="value: ContactPerson"><br />
        <input id="add" type="text" name="ItemName" class="k-textbox" data-bind="value: Address1"><br />
        <input id="cci" type="text" name="ItemName" class="k-textbox" data-bind="value: CompanyCity"><br />
        <input id="cs" type="text" name="ItemName" class="k-textbox" data-bind="value: CompanyState"><br />
        <input id="cco" type="text" name="ItemName" class="k-textbox" data-bind="value: CompanyCountry"><br />
        <input id="zpc" type="text" name="ItemName" class="k-textbox" data-bind="value: ZipPostCode"><br />
        <input id="tl" type="text" name="ItemName" class="k-textbox" data-bind="value: TelArea"><br /><br />
        <input id="id" type="text" class="k-textbox" name="ItemName" data-bind="value: Id"><br />
        <br />
        <br />
        <span style="margin-left:10px"><input id="save" class="k-button" onclick="updatedb()" type="button" value="update"></span><br>
    </div>


</form>

すべての列に検索ボックスを追加する方法と、キー変更イベントを設定する方法を誰か教えてもらえますか?