Change Autocomplete dataSource on the fly.

2 posts, 0 answers
  1. Steve
    Steve avatar
    2 posts
    Member since:
    Dec 2011

    Posted 17 Jun 2012 Link to this post

    I have a problem. I want to change dataSource of my Autocomplete on the fly. Here is the problem :

    I have a dropdown which has "ItemID" and "ItemName" for its element.

    When i select ItemID on the dropdown, i want my autocomplete to select "ItemID" data from the server for its dataSource.

    And when i select ItemName on the dropdown, i want  my autocomplete to select "ItemName" data from the server for its dataSource.

    Please help me..
  2. Jesse
    Jesse avatar
    12 posts
    Member since:
    Jul 2012

    Posted 22 Jun 2012 Link to this post

    I have a similar need as yours and have figured out how to change it on the fly. Not sure if this is the proper way to do it, but it works.
    Basically I setup a event on the Dropdownlists on close event. When this even fires I grab the dropdowns dataitem and make some decision based on this to fill in the proper URL and datatextfield. The down side to this approach is that your input will not show up as a Auto complete control until after you have selected a value, but if it really must you can initialize it before these methods to make it one with no dataTextField and Datasource properties.

               var searchType;
                var dataText;
                var onClose = function (e) {
                    var dropdown = $('#searchType').data('kendoDropDownList');
                    var selected = dropdown.dataItem();
                    switch (selected.searchType) {
                        case 'Bill String':
                            searchType = 'LRNumbers';
                            dataText = 'BillString';
                            break;
                        case 'Bill Sponsor':
                            searchType = 'BillSponsor';
                            break;
                        case 'LR Number':
                            searchType = 'LRNumbers';
                            dataText = 'LRNum';
                            break;
                        case  'Amendment Text':
                            searchType = 'AmendmentText';
                    }


                    $('#autocompleteSearchInput').kendoAutoComplete({
                        minLength:1,
                        dataTextField:dataText,
                        dataSource:new kendo.data.DataSource({
                            pageSize:10,
                            transport:{
                                read:{
                                    url:"http://localhost:52053/api/" + searchType,
                                    dataType:"jsonp"
                                }
                            }
                        })
                    });
                };


                $('#searchType').kendoDropDownList({
                    dataTextField:"searchType",
                    dataValueField:"Id",
                    close:onClose,
                    dataSource:[
                        { searchType:"Search Type", Id:"0"},
                        { searchType:"Bill String", Id:"1"},
                        { searchType:"Bill Sponsor", Id:"2"},
                        { searchType:"LR Number", Id:"3"},
                        { searchType:"Amendment Text", Id:"4"}
                    ]
                });
  3. Kendo UI is VS 2017 Ready
Back to Top