WebMD Ignite DX Engine

Select Search: Optgroups 

<br><br>

<div class="row">
    <div class="col-sm-6">
        <select multiple class="hgm-select-search" data-placeholder="Select an option" data-allow-deselect="true">
            <option data-placeholder="true"></option>
            <optgroup label="Fruits">
                <option value="Apples">Apples</option>
                <option value="Oranges">Oranges</option>
                <option value="Bananas">Bananas</option>
            </optgroup>
            <optgroup label="Vegetables">
                <option value="Tomatoes">Tomatoes</option>
                <option value="Potatoes">Potatoes</option>
                <option value="Carrots">Carrots</option>
            </optgroup>
        </select><!-- .hgm-select-search -->
    </div>
</div>
 
<br><br>

<div class="row">
    <div class="col-sm-6">
        <select multiple class="hgm-select-search" data-placeholder="Select an option" data-allow-deselect="true">
            <option data-placeholder="true"></option>
            <optgroup label="Fruits">
                <option value="Apples">Apples</option>
                <option value="Oranges">Oranges</option>
                <option value="Bananas">Bananas</option>
            </optgroup>
            <optgroup label="Vegetables">
                <option value="Tomatoes">Tomatoes</option>
                <option value="Potatoes">Potatoes</option>
                <option value="Carrots">Carrots</option>
            </optgroup>
        </select><!-- .hgm-select-search -->
    </div>
</div>
 
/* No context defined. */

Customizaton via Data Attributes

Use data attributes directly on the select element to change the visual and functional behavior; the following data attributes are currently in use:

  • data-placeholder set the placeholder string of the select; string expected
  • data-allow-deselect allow a selected value to be deselected; boolean (true) expected
  • data-disable-search disable the search capability of the select; boolean (true) expected
  • data-stay-open force the select to remain open while options are being selected - useful for multiselect elements; boolean (true) expected
  • data-font-color set the font color of the select text and arrow / plus icon; hex value expected with or without the hash tag
  • data-height set the height of the select element; numeric value expected
  • data-border-color set the border color; hex value expected with or without the hash tag
  • data-border-hover-color set the border hover color; hex value expected with or without the hash tag
  • data-background-color set the background color of the select; hex value expected with or without the hash tag
  • data-border-radius set the border radius of the select; numeric value expected
  • data-selected-options-background-color set the background color of selected options; hex value expected with or without the hash tag
  • data-search-input-border-color set the border color of the search input field; hex value expected with or without the hash tag
  • data-search-input-border-radius set the border radius of the search input field; numeric value expected
  • data-search-input-border-focus-color set the border focus color of the search input field; hex value expected with or without the hash tag
  • data-background-hover-color set the background color of the select options when user hovers; hex value expected with or without the hash tag
  • data-multi-selected-text-color set the text color of the selected options in a multi-select; hex value expected with or without the hash tag

Technical usage

For more information on how to handle state changes on the search select and methods that are exposed to the document object model, visit the link below: