Advanced Select

Learn how to build and use the advanced select controller from the phenix design system.

Overview

because the standard select controller doesn’t offer enough features to support a decent user experience in most cases, phenix .select() comes to cover that for you in the most simplistic way there is and gives you the freedom that you wish to manipulate, add, remove data as you need, and here are some tips to keep in mind :

• the original select is wrapped up with a new div with the same classes and it lives inside that wrapper.
• the search is not enabled by default you have to enable it with data-attribute or js options.
• the new select element can be styled with .form-control and take your style as any other controller.
• the callback events always come with all data and elements inside its detail object.

Basic Usage

in the next example, you can learn how to install and build the select(options) component from normal HTML select element, and with the default options you will just get a nice-looking select controller.

<!-- Form Control -->
<select name="px-select" class="form-control px-select" data-options...>
    <optgroup>Options Set 01</optgroup>
    <option value="option-1">Option #01</option>
    <option value="option-2">Option #02</option>
    <option value="option-3">Option #03</option>
    <option value="option-4">Option #04</option>
    <option value="option-5">Option #05</option>
    ...
</select>
<!-- // Form Controls -->

//====> Activate Select <====//
Phenix('.px-select').select(...options);

Enable Search

in the next example, you can learn how to enable the search through the options, list to filter a long list for specific options and choose it which can be useful if you have a lot of data in your select element this will make it easy for the user to filter their options and search for what they looking for faster.

<!-- Form Control -->
<select class="form-control px-select" data-search="1">...</select>
<!-- // Form Controls -->

//====> Activate Select <====//
Phenix('.px-select').select({ search: true });

Disabled, Placeholder

in the next example, you can see how the disabled options look and act, and how to set a placeholder for your select element with data-placeholder attribute, and if the select element itself has a disabled attribute it will be disabled from any interactive actions.

<!-- Form Control [disabled select] -->
<select class="form-control px-select" disabled>...</select>

<!-- Form Control [disabled options] -->
<select class="form-control px-select"  data-placeholder="With Disabled Options">
    <option value="">...</option>
    <option value="" disabled>...</option>
    <option value="">...</option>
    <option value="" disabled>...</option>
</select>

//====> Activate Select <====//
Phenix('.px-select').select();