This is a migrated thread and some comments may be shown as answers.

Autocomplete overlapping when being loaded by dropdownlist change event

1 Answer 470 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 24 Sep 2017, 09:40 PM

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>

 

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Neli
Telerik team
answered on 25 Sep 2017, 08:19 AM
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.
Tags
AutoComplete
Asked by
Chris
Top achievements
Rank 1
Answers by
Neli
Telerik team
Share this question
or