Kendo UI

jQuery + Kendo UI + MockJax + Knockout

HTML

<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.material.min.css">
<br /><br />
<input id="ddlEntity" style="width: 100%" />
<script type="text/html" id="EntityHeader">
    <span>Code</span>
    <span>Name</span>
    <span>Sector</span>
</script>
<script type="text/html" id="EntityRow">
    <span>#= Code #</span>
    <span>#= Name #</span>
    <span>#= Sector #</span>
</script>

CSS

.k-list-container span {
    display: inline-block;
    width: 100px;
}

JavaScript

$("#ddlEntity").kendoDropDownList({
    headerTemplate: $("#EntityHeader").html(),
    template: kendo.template($("#EntityRow").html()),
    filter: "contains",
    dataTextField: "Name",
    dataValueField: "Id",
    dataSource: new kendo.data.DataSource({
        transport: {
            read: function (options) {
                // Call to WebAPI to get the data
                // Assume that it returned the below list
                var result = [
                    { Id: 1, Code: "Code 1.1", Name: "Entity 1.1", Sector: "Sector 1" },
                    { Id: 2, Code: "Code 1.2", Name: "Entity 1.2", Sector: "Sector 1" },
                    { Id: 3, Code: "Code 1.3", Name: "Entity 1.3", Sector: "Sector 1" },
                    { Id: 4, Code: "Code 2.1", Name: "Entity 2.1", Sector: "Sector 2" },
                    { Id: 5, Code: "Code 2.2", Name: "Entity 2.2", Sector: "Sector 2" }
                ]
                options.success(result);
            }
        }
    })
});