JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<div id="comboIG"></div>
CSS
#comboContainer
{
margin-bottom: 30px;
}
.comboTemplates
{
text-align: center;
padding: 2px;
}
#comboHeaderTemplate
{
font-size: large;
font-weight: bold;
background-color: rgb(185, 9, 11);
color: White;
}
#comboFooterTemplate
{
font-size: small;
background-color: rgb(245, 245, 164);
}
.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;
height: 70px;
}
li.ui-igcombo-listitem div.empImage a
{
border: none
}
.igsb-running-sample > div:first-of-type
{
width : 50% !important;
}
JavaScript
$(function () {
$("#comboIG").igCombo({
highlightMatchesMode: "contains",
responseDataKey: "d.results",
valueKey: "Name",
width: "325px",
closeDropDownOnBlur: false,
visibleItemsCount: 3,
dataSource: "https://www.igniteui.com/api/employees?callback=?",
headerTemplate: "<div id='comboHeaderTemplate' class='comboTemplates'>Employees</div>",
footerTemplate: "<div id='comboFooterTemplate' class='comboTemplates'>More information at <a href='https://www.infragistics.com' target='_blank'>https://www.infragistics.com</div>",
itemTemplate: "<div class='comboItemContainer'><div class='empImage'><a href='https://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>"
});
});