Autocomplete overlapping when being loaded by dropdownlist change event

2 posts, 1 answers
  1. Chris
    Chris avatar
    3 posts
    Member since:
    Sep 2017

    Posted 24 Sep Link to this post

    I have an AutoComplete being populated when I select a value from a dropdownlist. Its fine the first time I select a value from a dropdownlist, but when I change my mind and select a different value the AutoComplete overlaps itself, and then gets a blue border..How do I stop the Autocomplete from overlapping itself, when I select a different value from the dropdownlist?

     

    Here is the code

     

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Untitled</title>
     
     
    <body>
      <div class="container">
      <div class="form-horizontal">
        <div class="row">
          <div class="col-md-5">
            <div class="form-group">
              <input id="txtState" />
            </div>       
          </div>
        </div><!-- End txtState -->
         
        <div class="row">
          <div class="col-md-5">
            <div class="form-group">
              <input id="txtCounty" />
            </div>
          </div>
        </div><!-- End txtState -->
         
      </div><!-- End form horizontal -->
      </div>
       
       
    <script>
      $(document).ready(function(){
            var stateData = [
          {"StateID" : 1, "StateName": "Oklahoma"},
          {"StateID" : 2, "StateName": "Texas"}
        ];
             
        LoadStates(stateData);
        LoadCounty(0);
      });
       
      function LoadStates(stateData){
            var countyData1 = [
          {"CountyID" : 1, "CountyName": "CountyA"},
          {"CountyID" : 2, "CountyName": "CountyB"},
          {"CountyID" : 3, "CountyName": "CountyC"},
          {"CountyID" : 4, "CountyName": "CountyD"}
        ];
         
        var countyData2 = [
          {"CountyID" : 5, "CountyName": "CountyE"},
          {"CountyID" : 6, "CountyName": "CountyF"},
          {"CountyID" : 7, "CountyName": "CountyG"},
          {"CountyID" : 8, "CountyName": "CountyH"}
        ];
         
        $("#txtState").kendoDropDownList({
                dataSource: stateData,
                index: 0,
                dataTextField: "StateName",
                dataValueField: "StateID",
                animation: false,
                optionLabel: "State",
                change: function (e) {
                    var dataItem = e.sender.dataItem();
                    if(dataItem.StateID === 1){
            $("#txtCounty").removeAttr('style');
                      LoadCounty(countyData1);
                    }
                  else
                  {
          $("#txtCounty").removeAttr('style');
                    LoadCounty(countyData2);
                  }
                     
                }
            });
      }
       
      function LoadCounty(countyData){
      $("#txtCounty").kendoAutoComplete({
                dataSource: countyData,
                dataTextField: "CountyName",
                dataValueField: "CountyID",
                filter: "startswith",
                placeholder: "Type County...",
                select: function (e) {
                    var DataItem = this.dataItem(e.item.index());
                    currentSelectedItem = DataItem.CountyID;
                }
            });
      }
    </script>
    </body>
    </html>

     

     

  2.
  3. Answer
    Neli
    Admin
    Neli avatar
    28 posts

    Posted 25 Sep Link to this post

    Hello Chris,

    Attached you may find a Dojo example where an AutoComplete widget is populated based on the data selected in a DropDownList. 

    In order to have only one instance of the AutoComplete, the initialization of the widget is extracted outside of the LoadCounty method. In the method the AutoComplete widget is referenced and the dataSource is set using the setDataSource method.

    function LoadCounty(countyData){
        var autocomplete = $("#txtCounty").data("kendoAutoComplete");      
        autocomplete.setDataSource(countyData);
    }


    Regards,
    Neli
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top