In this topic you will add input controls and script to initialize the datasource.

1. Add the following markup just under the data source markup you added in the previous step:

<cc1:C1ListExtender runat="server" onclientselected="list_selected" TargetSelector="#list"></cc1:C1ListExtender>

<div class="ui-widget">

    <input style="width: 400px" id="testinput" type="text" class="ui-widget-content ui-corner-all" /><input type="button" onclick="loadRemoteData()" id="loadremote" value="Load Remote Data" />

    <div id="list" style="height: 300px; width: 400px;">

    </div>

</div>

This adds a text box, button, and a C1ListExtender which will be used to view remote data.

2. Add the following script tags just under the markup you added in the previous steps:

         <script id="scriptInit" type="text/javascript">

    var list = $("#list");

    var input = $('#testinput');

    var ajaxData = {

        featureClass: "P",

        style: "full",

        maxRows: 12,

        name_startsWith: 'ab'

    };

    function reader_mapping(item)

    {

        return item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName

    }

    function list_selected(event, ui)

    {

        var item = ui.item;

        input.val(item.value);

        list.wijlist('deactivate');

    }

    function datasource_loading()

    {

        input.addClass('wijmo-wijcombobox-loading');

    }

    function datasource_loaded(data)

    {

        list.wijlist('setItems', data.items);

        list.wijlist('renderList');

        list.wijlist('refreshSuperPanel');

        input.removeClass('wijmo-wijcombobox-loading');

    }

    $(document).ready(function ()

    {       

        DataSource1.load();

        input.bind("keydown.wijcombobox", function (event)

        {

            var keyCode = $.ui.keyCode;

            switch (event.keyCode)

            {

                case keyCode.UP:

                    list.wijlist('previous', event);

                    // prevent moving cursor to beginning of text field in some browsers

                    event.preventDefault();

                    break;

                case keyCode.DOWN:

                    if (!list.is(':visible'))

                    {

                        list.show();

                        return;

                    }

                    list.wijlist('next', event);

                    // prevent moving cursor to end of text field in some browsers

                    event.preventDefault();

                    break;

                case keyCode.ENTER:

                    event.preventDefault();

                    list.wijlist('select', event);

                    break;

                case keyCode.PAGE_UP:

                    list.wijlist('previousPage');

                    break;

                case keyCode.PAGE_DOWN:

                    list.wijlist('nextPage');

                    break;

                default:

                    break;

            }

        });

    });

    function loadRemoteData()

    {

        var datasource = DataSource1;

        datasource.proxy.options.data.name_startsWith = $('#testinput').val();

        datasource.load();

    }

</script>

This script loads and displays data.

In this step you initialized the elements in the application. In the next step you'll view run-time interactions in the application.