JSFiddle - React, Tailwind, and code Playground

by damyanpetev

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<div id="comboIG"></div>

CSS

#comboHeaderTemplate {
    background-color: #3CD3FF;
    position: absolute;
    z-index: 1;
    width:100%;
}
.ui-igcombo-listitemholder>li:first-child{
      padding-top: 1.5em;
}

#comboContainer {
    margin-bottom: 30px;
}
.comboTemplates {
    text-align: center;
    padding: 2px;
}
.empImage {
    float: left;
    width: 64px;
    padding-top: 3px;
}
.empInfo {
    float: left;
    padding-left: 5px;
    width: 240px;
}
.empName {
    font-weight: bold;
}
.comboItemContainer {
    width: 325px;
    white-space: normal;
    overflow: auto;
    /* quick clearfix */
}

JavaScript

$(function () {

    $("#comboIG").igCombo({
        highlightMatchesMode: "contains",
        responseDataKey: "d.results",
        valueKey: "Name",
        width: "325px",
        closeDropDownOnBlur: false,
        virtualization: true,
        visibleItemsCount: 5,
        dataSource: "http://igniteui.com/api/employees?callback=?",
        itemTemplate: "<div class='comboItemContainer'><div class='empImage'><a href='http://www.infragistics.com' target='_blank'><img src='${ImageUrl}' width='64px' /></a></div><div class='empInfo'><span class='empName'>${Name}</span><p>${BirthDate}</p><div>${Address}</div></div></div>"
    })

    .one("igcombodropdownopening", function (evt, ui) {
        var header = "<div id='comboHeaderTemplate' class='comboTemplates' tabindex='-1'>Employees</div>";
        // obtain reference to igCombo dropdown
        var dropdown = ui.owner.dropDown();
        // set initial header only once and if there's no such option
        if (!ui.owner.options.hasOwnProperty("headerTemplate")) {
            dropdown.prepend(header);
        } else {
            // once the options is made available, just set it
            $("#comboIG").igCombo("option", "headerTemplate", header);
        }
    });
});