syed mhamudul hasan akash syed mhamudul hasan akash - 7 months ago 19
Javascript Question

Drop down list value and text in teleric autocomplete

I have a dropdown list with simple auto complete from teleric UI.I simply want to get text and value from dropdown list by jQuery.But it is not working .
Here is the code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<%--<input id="autocomplete" />
--%> <<asp:DropDownList ID="autocomplete" runat="server" ClientIDMode="Static">
</asp:DropDownList>

</div>
</form>
<script type="text/javascript">
$(function () {
var data = [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
];
$("#autocomplete").kendoAutoComplete({
dataTextField: "name", // The widget is bound to the "name" field
dataSource: data
});
$('#autocomplete').on('change', function() {
var autoCompleteValue = $('#autocomplete').val();
var autoCompleteText = $('#autocomplete').text();
alert(autoCompleteValue + '->' + autoCompleteText);
});

});
</script>
</body>
</html>


I want to get value and text when i change the dropdown list.say i select Apples

i want

autoCompleteValue = "1";
autoCompleteText = "Apples";

Answer

You can slightly modify your code to achieve your solution:

<input id="autocomplete" />
<div id="result"></div>

$("#autocomplete").kendoAutoComplete({
    dataTextField: "name",
    select: function(e) {
        var dataItem = this.dataItem(e.item.index());            
        //output selected dataItem
        $("#result").html(kendo.stringify(dataItem)); // Bind html to see your selected text and value      
    },
    dataSource: {
        data: [
            { name: "Apples", value: 1 },
            { name: "Oranges", value: 2 },
            { name: "Bananas", value: 3 },
            { name: "Mangos", value: 4 }
        ]
    }
});