igCombo in jQuery accordion

by georgianastasov

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.13.2/jquery-ui.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>
<script src="https://igniteui.com/js-data/nw-products"></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="accordion">
  <h3>Section 1</h3>
  <div>
     <p>Lorem ipsum</p> 
  </div>
  <h3>Section 2</h3>
  <div>
    <p style="margin: 0;">Combo:</p> 
    <div id="combo"></div>
  </div>
   <h3>Section 3</h3>
  <div>
     <p>Lorem ipsum</p> 
  </div>
</div>

JavaScript

$(function () {
var northwindProductsEN = [
            { "ProductID": 1, "ProductName": "Chai" }, { "ProductID": 2, "ProductName": "Chang" }, { "ProductID": 3, "ProductName": "Aniseed Syrup"}, { "ProductID": 4, "ProductName": "Chef Anton\u0027s Cajun Seasoning" },
            { "ProductID": 5, "ProductName": "Chef Anton\u0027s Gumbo Mix" }, { "ProductID": 6, "ProductName": "Grandma\u0027s Boysenberry Spread" }, { "ProductID": 7, "ProductName": "Uncle Bob\u0027s Organic Dried Pears" },
            { "ProductID": 8, "ProductName": "Northwoods Cranberry Sauce" }, { "ProductID": 9, "ProductName": "Mishi Kobe Niku" }, { "ProductID": 10, "ProductName": "Ikura" }, { "ProductID": 11, "ProductName": "Queso Cabrales", "CategoryName": "Dairy Products" }]

        $(function () {
        
        		$( "#accordion" ).accordion();

            $("#combo").igCombo({
                width: "270px",
                textKey: "ProductName",
                valueKey: "ProductID",
                dataSource: northwindProductsEN,
                filteringType: "local",
                autoComplete: true,
                placeHolder: "Focus me...",
                dropDownOrientation: "bottom"
            });

           
        });
});