Kendo UI

jQuery + Kendo UI + MockJax + Knockout

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.blueopal.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<input id="countries" />

JavaScript

var data = [
     "Albania",
     "Andorra",
     "Armenia",
     "Austria",
     "Azerbaijan",
     "Belarus",
     "Belgium",
     "Bosnia & Herzegovina",
     "Bulgaria",
     "Croatia",
     "Cyprus",
     "Czech Republic",
     "Denmark",
     "Estonia",
     "Finland",
     "France",
     "Georgia",
     "Germany",
     "Greece",
     "Hungary",
     "Iceland",
     "Ireland",
     "Italy",
     "Kosovo",
     "Latvia",
     "Liechtenstein",
     "Lithuania",
     "Luxembourg",
     "Macedonia",
     "Malta",
     "Moldova",
     "Monaco",
     "Montenegro",
     "Netherlands",
     "Norway",
     "Poland",
     "Portugal",
     "Romania",
     "Russia",
     "San Marino",
     "Serbia",
     "Slovakia",
     "Slovenia",
     "Spain",
     "Sweden",
     "Switzerland",
     "Turkey",
     "Ukraine",
     "United Kingdom",
     "Vatican City"];

 //create AutoComplete UI component
 var complete = $("#countries").kendoAutoComplete({
     dataSource: data,
     filter: "startswith",
     placeholder: "Select country...",
     separator: ", ",
     minLength: 50
 }).data("kendoAutoComplete");

 $("#countries").keypress(function (e) {
     if (e.which == 13) {
         complete.options.minLength = 1;
         complete.search($("#countries").val());
         complete.options.minLength = 2;
     }
 });