Kendo UI Starter Template

An empty fiddle with the latest Kendo UI CSS and JS references.

HTML

<script src="https://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.all.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.common.min.css">
<input id="comboBox" />
<script>
$(document).ready(function(){
    console.log("hello");
    $("#comboBox").kendoComboBox({
      dataTextField: "text",
      dataValueField: "value",
      change: onChange,
      dataSource: [
        { text: "KOREA", value: "KOR" },
        { text: "JAPEN", value: "JPN" }
      ]
    });
  });
  
  function onChange(e)
  {    
    if(this.value() == "jpn"){
       e.sender.select(function(dataItem) {
          return dataItem.text === "JAPEN";
      });    
    }
  }
</script>

<!DOCTYPE html>
<html>
<body>
<h1>I want it, typing JAPAN & JPN</h1>
<input list="browsers" name="browser" id="browser">
  <datalist id="browsers">
    <option value="Japan">JPN</option>
    <option value="Korea">KOR</option>
    <option value="Brazil">BRA</option>
    <option value="Jamaica">JAM</option>
    <option value="Zambia">ZMB</option>
  </datalist>
</body>
</html>