如何获取 kendo UI 的自动完成组件的 DataValueField？

Question

您好，我正在使用 Kendo UI，特别是 kendoAutoComplete 组件。我可以获取自动完成字段的值，但我需要与之关联的 id 值。

$("#autocomplete").kendoAutoComplete({
    minLength: 3,
    dataTextField: "Name", //JSON property name to use
    dataValueField: "Id",
    dataSource: respuestaSolicitud
});

我是这样拍的

var x=$('#autocomplete').data("kendoAutoComplete");

变量x返回[对象]

document.getElementById('autocomplete').value

dataTextField: "Name"的返回值 但我需要整数值dataValueField: "Id"

Answer 1

$(document).ready(function () {
            var data = [{Name:"aaaa",Id:1111},{Name:"bbbb",Id:2222}
            ];

            //create AutoComplete UI component
            $("#countries").kendoAutoComplete({
                dataSource: data,
                change: function(e){
                    alert(this.dataItem().Id)
                },
                dataTextField: "Name", //JSON property name to use
                dataValueField: "Id",
                filter: "startswith",
                placeholder: "Select country...",
                separator: ", "
            });
        });

        function _getValue(){

            alert($("#countries").data("kendoAutoComplete").value())
        }

.info {
            display: block;
            line-height: 22px;
            padding: 0 5px 5px 0;
            color: #36558e;
        }

        #shipping {
            width: 482px;
            height: 152px;
            padding: 110px 0 0 30px;
            background: url('../content/web/autocomplete/shipping.png') transparent no-repeat 0 0;
            margin: 100px auto;
        }

        .k-autocomplete
        {
            width: 250px;
            vertical-align: middle;
        }

        .hint {
            line-height: 22px;
            color: #aaa;
            font-style: italic;
            font-size: .9em;
            color: #7496d4;
        }

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.material.min.css" />

    <script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>

<div id="example">

    <div id="shipping">
        <button onclick="_getValue()">press me</button>

        <label for="countries" class="info">Choose shipping countries:</label>

        <input id="countries" />

        <div class="hint">Start typing the name of an European country</div>

    </div>

你可以使用下划线来查找结果

var selected = $("#countries").data("kendoAutoComplete").value();
var dataItem = _.find($("#$("#countries").data("kendoAutoComplete").dataSource.data(),function(element){
return element.Name=== selected;
})

alert (dataItem.Id)

另一种方法是使用更改事件，然后在该事件上，您可以使用 this.dataItem() 获取完整元素，因此您可以使用以下方法获取 Id

this.dataItem().Id