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

Autocomplete overlapping when being loaded by dropdownlist change event

1 Answer 487 Views

AutoComplete

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

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>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common-bootstrap.min.css">

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.blueopal.min.css">

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script></head>

<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 class="row">

<div class="col-md-5">

<div class="form-group">

<input id="txtCounty" />

</div>

</div>

</div>

</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

Accepted

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.