Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title>Kendo UI AutoComplete dataValueField parameter</title>
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.web.min.js"></script>
</head>
<body>
  <input type="text" id="code" />
  <span id="name"></span>
<script>
    $(function () {
      var $code = $("#code");
      function codePage(code, name) {
        this.codePage= code;
        this.name = name;
        this.textForSearch = code + " " + name;
      }
      var data = [
        new codePage("869", "Greek"),
        new codePage("932", "Japanese"),
        new codePage("936", "Simplified Chinese"),
        new codePage("949", "Korea"),
        new codePage("950", "Traditional Chinese")
      ];
      $code.kendoAutoComplete({
        dataTextField: "textForSearch",
        dataValueField: "codePage", 
        dataSource: data,
        filter: "contains",
        select: function (e) {
            //get index of <LI>
            var idx = $.inArray(e.item[0], e.sender.items());
            var data = e.sender.dataItem(idx);
            //set name
            $("#name").text(data.name);
        }
      });
      var ac = $code.data("kendoAutoComplete");
      //Patch the kendoAutoComplete object to add value support
      patchKendoAutoComp(ac);
    });
​
    var SELECTED = "k-state-selected", List = kendo.ui.List;
    function patchKendoAutoComp(autoCompObject) {
        //add optionValueField support to 2013.2.716 version 
        autoCompObject._select = function (li) {
            var that = this,
                separator = that.options.separator,
                data = that._data(),
                text,
                idx;
​
            li = $(li);
​
            if (li[0] && !li.hasClass(SELECTED)) {
            
                idx = List.inArray(li[0], that.ul[0]);
​
                if (idx > -1) {
                    data = data[idx];
                    //if dataValueField provided, use _value
                    text = that.options.dataValueField ? that._value(data) : 
                           that._text(data);
​
                    if (separator) {
                        text = replaceWordAtCaret(caretPosition(that.element[0]), that._accessor(), text, separator);
                    }
​
                    that._accessor(text);
                    that.current(li.addClass(SELECTED));
                }
            }
        }
    }
  </script>  
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
darkthreadpro
0viewers