Drop down list value and text in teleric autocomplete

1
votes

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";
2
jquerytelerik

2 Answers

0
votes

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 }
        ]
    }
});
0
votes

You might need to change your DataSource and Autocomplete functions as follows:

var items = new kendo.data.DataSource({
    transport: {
        read: {
            url     : "/Home/GetItems",
            type    : "POST",
            dataType: "json"
        }
    },
    schema   : {
        model: {
            id    : "id",
            fields: {
                id  : { type: "id" },
                name: { type: "string" }
            }
        }
    }
});

var autoComplete = $("#autocomplete").kendoAutoComplete({
    minLength      : 3,
    separator      : ", ",
    dataSource     : items,
    serverFiltering: true,
    dataTextField  : "name"
}).data("kendoAutoComplete");