ui.igCombo

ui.igCombo_image

The igCombo control is a jQuery combo box which supports virtualization, auto-complete, auto-suggest, multiple selection, and item templates. With the igCombo control you can create drop downs that accept text entries as well as options selected from the items list. Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above.

The following code snippet demonstrates how to initialize the igCombo control.

Click here for more information on how to get started using this API. For details on how to reference the required scripts and themes for the igCombo control read, Using JavaScript Resources in Ignite UI and Styling and Theming Ignite UI.

Code Sample

<!doctype html>
  <html>
  <head>
      <!-- Infragistics Combined CSS -->
      <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
      <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
      <!-- jQuery Core -->
      <script src="js/jquery.js" type="text/javascript"></script>
      <!-- jQuery UI -->
      <script src="js/jquery-ui.js" type="text/javascript"></script>
      <!-- Infragistics Combined Scripts -->
      <script src="js/infragistics.core.js" type="text/javascript"></script>
            <script src="js/infragistics.lob.js" type="text/javascript"></script>
      <script type="text/javascript">
              $(function () {
                    var colors = [{
                    "Name": "Black"
                  }, {
                    "Name": "Blue"
                  }, {
                    "Name": "Brown"
                  }, {
                    "Name": "Red"
                  }, {
                    "Name": "White"
                  }, {
                    "Name": "Yellow"
                  }];
 
            $("#combo").igCombo({
                    dataSource: colors,
                    textKey: "Name",
                    valueKey: "Name",
                    width: "200px"
              });
          });
      </script>
 
</head>
<body>
   <input id="combo" />
</body>
</html>

Related Samples

Related Topics

Dependencies

jquery-1.9.1.js
jquery.ui.core.js
jquery.ui.widget.js
infragistics.templating.js
infragistics.util.js
infragistics.util.jquery.js
infragistics.datasource.js
infragistics.ui.widget.js

Inherits

Copyright © 1996 - 2025 Infragistics, Inc. All rights reserved.