JSFiddle - React, Tailwind, and code Playground

by flexin

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<input 
    class="fx-wg-relatedobject"
    name="test-name"
    data-relatedclass="NameServerGroup"
    data-childclass="NameServer"
    data-json-url="/echo/json/"
    data-textfield="l"
    data-valuefield="v" 
    style="width: 300px;"
    value="101"
    data-translatedvalue="test label" 
/>

JavaScript

$(document).ready(function() {
    new Request.JSON({
        url: '/echo/json/',
        data: {
            json: JSON.encode([{
                "l": "label group 1",
                "v": "101"},
            {
                "l": "label group 2",
                "v": "102"}]),
            delay: 3
        }
    });

    $('.fx-wg-relatedobject').removeClass('fx-wg-relatedobject').kendoAutoComplete({
        autoBind: false,
        dataSource: {
            type: "json",
            serverFiltering: true,
            transport: {
                read: {
                    url: $(this).attr("data-json-url"),
                    dataType: "json"
                }
            }
        },
        dataTextField: $(this).attr("data-textfield"),
        dataValueField: $(this).attr("data-valuefield"),
        filter: "contains",
        text: $(this).attr("data-translatedvalue"),
        value: $(this).val()

    });
});