JSFiddle - React, Tailwind, and code Playground

by burninromz

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<script id="ktemplate" type="text/x-kendo-template">
     ${name},${adminName1},${countryName}
</script>

<input id="autoComplete" />

JavaScript

$(document).ready(function() {

var url = "http://ws.geonames.net/searchJSON?country=CA&country=US&country=GB&country=AU&country=DE&country=NL&country=CN&country=JP&country=KR&country=IN&country=MX&countryBias=CA&featureClass=P&style=long&maxRows=15&username=travelalberta&orderby=relevance"

var urlRestrictAlberta =  "http://ws.geonames.net/searchJSON?country=CA&countryBias=CA&featureClass=P&&adminCode1=01&style=long&maxRows=15&orderby=relevance"

var datasource = new kendo.data.DataSource({
   transport: {
    read: {
     url: urlRestrictAlberta,
     data: {
      name_startsWith: function(){
       return $("#autoComplete").data("kendoAutoComplete").value();
      },
      maxRows: 10,
      username: "travelalberta"
     }
    }
   },
   schema: {
    data:"geonames"
   }
  });

$("#autoComplete").kendoAutoComplete({
  minLength:3,
    serverFiltering:true,
  dataTextField:"name",
  dataSource: datasource,
  change: function(){
   this.dataSource.read();
  },
    select:function(selected){
        var autocomplete = $("#autoComplete").data("kendoAutoComplete");
        selected.prevent
    },
    template: kendo.template($("#ktemplate").html())
 })
});