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