JSFiddle - React, Tailwind, and code Playground

by ashitanojoe

HTML

<script src="//da7xgjtj801h2.cloudfront.net/2013.1.319/js/kendo.web.min.js"></script>
<link rel="stylesheet" href="//da7xgjtj801h2.cloudfront.net/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="//da7xgjtj801h2.cloudfront.net/2013.1.319/styles/kendo.default.min.css">
<div id="window">
    <form>
        <input type="text" />
    </form>
    <ul id="results"></ul>
</div>

JavaScript

var w = $("#window").kendoWindow({
    visible: true,
    title: "Type 'C' to see list",
    resizable: false,
    activate: function () {
        this.element.find("input:text").focus();
    }
}).data("kendoWindow");

var ac = $("#window").find(":text").kendoAutoComplete({
    dataSource: ["Cab", "Car", "Cat"],
    filter: "startsWith",
    open: function (e) {
        e.preventDefault();
    },
    select: function (e) {
        alert("select");
    }
}).data("kendoAutoComplete");

ac.ul = $("#results");

$(document).on("click", function (e) {
    var $elm = $(e.target);
    if ($elm.closest(".k-window").length === 0) {
        w.close();
    }
});