Smart Select

Smart select allows you to easily convert your usual form selects to dynamic pages with grouped radio inputs. You can see such feature in many native iOS apps

Smart Select Layout

Smart select layout is pretty easy. It is a well known List View with <select> inside and additional "smart-select" class on "item-link":

<div class="list-block">
  <ul>
    <!-- Smart select item -->
    <li>
      <!-- Additional "smart-select" class -->
      <a href="#" class="item-link smart-select">
        <!-- select -->
        <select name="fruits">
          <option value="apple" selected>Apple</option>
          <option value="pineapple">Pineapple</option>
          ...
        </select>
        <div class="item-content">
          <div class="item-inner">
            <!-- Select label -->
            <div class="item-title">Fruit</div>
            <!-- Selected value, not required -->
            <div class="item-after">Apple</div>
          </div>
        </div>
      </a>
    </li>
    <!-- Another smart selects or list view elements -->
    ...
  </ul>
</div>   

Note that smart select works only in initialized Views!

Smart Select with Search Bar

It is possible to use Smart selects with search bars. If you want to use all Smart selects with search bars you may just enable it by passing smartSelectSearchbar:true parameter on App initialization.

Otherwise it can be configured via "data-" attributes:

<div class="list-block">
  <ul>
    <!-- Smart select item -->
    <li>
      <a href="#" class="item-link smart-select" data-searchbar="true" data-searchbar-placeholder="Search fruits">
        ... same Smart select Fruits structure as in previous example ...
      </a>
    </li>
    <li>
      <a href="#" class="item-link smart-select" data-searchbar="true" data-searchbar-placeholder="Search cars">
        ... same Smart select Cars structure as in previous example ...
      </a>
    </li>
  </ul>
</div>

Where

  • data-searchbar - enable (or overwrite global App's smartSelectSearchbar parameter) search bar for this Smart select
  • data-searchbar-placeholder - search field placeholder. Optional. By default equal to "Search"
  • data-searchbar-cancel - text for search bar Cancel button. Optional. By default equal to "Cancel"

Custom page title and back link text

By default, Smart Select's page title is the same as in clicked item's "item-title" text and back-link text is equal to the one specified in "smartSelectBackText" App's paramter.

But sometimes we may need to have custom page title and back-link for specific Smart Selects. We may use data-page-title and data-back-text attributes on Smart Select link:

<div class="list-block">
  <ul>
    <!-- Smart select item -->
    <li>
      <a href="#" class="item-link smart-select" data-page-title="Awesome Fruits" data-back-text="Go back">
        ... same Smart select Fruits structure as in previous example ...
      </a>
    </li>
    <li>
      <a href="#" class="item-link smart-select" data-page-title="Super Cars" data-back-text="Go back">
        ... same Smart select Cars structure as in previous example ...
      </a>
    </li>
  </ul>
</div>

Open in Popup

It is possible to open Smart select as popup, not as page. If you want to open all Smart selects in popup you may just enable it by passing smartSelectOpenIn:'popup' parameter on App initialization.

Otherwise it can be configured via data-open-in attribute:

<div class="list-block">
  <ul>
    <li>
      <!-- Smart select, will be opened in Popup -->
      <a href="#" class="item-link smart-select" data-open-in="popup">
        ... same Smart select Fruits structure as in previous example ...
      </a>
    </li>
    <li>
      <!-- Smart select, will be opened in Popup with custom "Close" text -->
      <a href="#" class="item-link smart-select" data-open-in="popup" data-popup-close-text="Close Cars">
        ... same Smart select Cars structure as in previous example ...
      </a>
    </li>
  </ul>
</div>

Note, if you set all Smart select as popups using App smartSelectOpenIn:'popup', you may still open it as page using data-open-in="page" attribute

Open in Picker

It is possible to open Smart select as picker modal, not as page. If you want to open all Smart selects in picker modal you may just enable it by passing smartSelectOpenIn:'picker' parameter on App initialization.

Otherwise it can be configured via data-open-in attribute:

<div class="list-block">
  <ul>
    <li>
      <!-- Smart select, will be opened in Picker -->
      <a href="#" class="item-link smart-select" data-open-in="picker">
        ... same Smart select Fruits structure as in previous example ...
      </a>
    </li>
    <li>
      <!-- Smart select, will be opened in Picker with custom close text -->
      <a href="#" class="item-link smart-select" data-open-in="picker" data-picker-close-text="Close Cars">
        ... same Smart select Cars structure as in previous example ...
      </a>
    </li>
    <li>
      <!-- Smart select, will be opened in Picker with custom height -->
      <a href="#" class="item-link smart-select" data-open-in="picker" data-picker-height="400px">
        ... same Smart select Cars structure as in previous example ...
      </a>
    </li>
  </ul>
</div>

You can specify custom Smart select picker height using data-picker-height attribute

If you set all Smart select as picker modal using App smartSelectOpenIn:'picker', you may still open it as page using data-open-in="page" attribute

Custom icons, colors and images

You can also specify Smart Select page' list view element custom icon, image or color. We need to use additional data-option-icon, data-option-image attributes on smart select <select> (to set default image for all options) or on <option> to set image or icon on single option.

For single option we may also use data-option-color and data-option-class attributes to add specific option color or css class for additional styling

<a href="#" class="item-link smart-select">
  <select name="fruits">
    <option value="apple" selected data-option-image="http://lorempixel.com/29/29/">Apple</option>
    <option value="pineapple" data-option-image="http://lorempixel.com/29/29/?2">Pineapple</option>
    <option value="pear" data-option-color="orange" data-option-image="http://lorempixel.com/29/29/?3">Pear</option>
    ...
  </select>
  <div class="item-content">
    <div class="item-inner">
      <div class="item-title">Fruit</div>
    </div>
  </div>
</a>

Multiple Select and optgroup

<div class="list-block">
  <ul>
    <li><a href="#" class="item-link smart-select">
        <!-- "multiple" attribute for multiple select-->
        <select name="car" multiple>
          <!-- options grouped within "optgroup" tag-->
          <optgroup label="Japanese">
            <option value="honda" selected>Honda</option>
            <option value="lexus">Lexus</option>
            <option value="mazda">Mazda</option>
            <option value="nissan">Nissan</option>
            <option value="toyota">Toyota</option>
          </optgroup>
          <optgroup label="German">
            <option value="audi" selected>Audi</option>
            <option value="bmw">BMW</option>
            <option value="mercedes">Mercedes</option>
            <option value="vw">Volkswagen</option>
            <option value="volvo">Volvo</option>
          </optgroup>
          <optgroup label="American">
            <option value="cadillac">Cadillac</option>
            <option value="chrysler">Chrysler</option>
            <option value="dodge">Dodge</option>
            <option value="ford" selected>Ford</option>
          </optgroup>
        </select>
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title">Car</div>
          </div>
        </div></a></li>
  </ul>
</div>          

We can also use multiple select and group options using <optgroup>. So if we add "multiple" attribute to our select then radio buttons on smart select page will be automatically converted to checkboxes:

Multiple Select and maxlength

With multiple select we can also use maxlength attribute to limit number of possible selected items:

<div class="list-block">
  <ul>
    <li><a href="#" class="item-link smart-select">
        <!-- "maxlength" attribute to limit number of possible selected items -->
        <!-- we won't allow to select more than 3 items -->
        <select name="car" multiple maxlength="3">
          <optgroup label="Japanese">
            <option value="honda" selected>Honda</option>
            <option value="lexus">Lexus</option>
            <option value="mazda">Mazda</option>
            <option value="nissan">Nissan</option>
            <option value="toyota">Toyota</option>
          </optgroup>
          <optgroup label="German">
            <option value="audi">Audi</option>
            <option value="bmw">BMW</option>
            <option value="mercedes">Mercedes</option>
            <option value="vw">Volkswagen</option>
            <option value="volvo">Volvo</option>
          </optgroup>
          <optgroup label="American">
            <option value="cadillac">Cadillac</option>
            <option value="chrysler">Chrysler</option>
            <option value="dodge">Dodge</option>
            <option value="ford">Ford</option>
          </optgroup>
        </select>
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title">Car</div>
          </div>
        </div></a></li>
  </ul>
</div>

Different display value

Using data-display-as option attribute we can show selected value in different way:

<div class="list-block">
  <ul>
    <li>
      <a href="#" class="item-link smart-select">
        <select name="days">
          <option value="monday" selected data-display-as="Mon">Monday</option>
          <option value="tuesday" data-display-as="Tue">Tuesday</option>
          <option value="wednesday" data-display-as="Wed">Wednesday</option>
          <option value="thursday" data-display-as="Thu">Thursday</option>
          <option value="friday" data-display-as="Fri">Friday</option>
          <option value="saturday" data-display-as="Sat">Saturday</option>
          <option value="sunday" data-display-as="Sun">Sunday</option>
        </select>
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title">Day</div>
          </div>
        </div>
      </a>
    </li>
  </ul>
</div>

Close Smart Select On User Select

It is possible to close Smart Select page automatically after user selects any option. We need to add special data-back-on-select attribute to make it work:

<div class="list-block">
  <ul>
    <!-- data-back-on-select="true" to close page automatically -->
    <li><a href="#" class="item-link smart-select" data-back-on-select="true">
        <select name="car" multiple>
          ...
        </select>
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title">Car</div>
          </div>
        </div></a></li>
  </ul>
</div> 

If you want to add such behavior for all of your smart selects you may use smartSelectBackOnSelect App parameter

Smart Select With Virtual List

You may enable Virtual List for smart select if your select has a lot (hundreds, thousands) of options. In this case we just need to add data-virtual-list="true" attribute to smart select:

<div class="list-block">
    <ul>
        <li>
            <!-- data-virtual-list="true" attribute to enable virtual list  -->
            <a href="#" class="item-link smart-select" data-virtual-list="true">
                <select name="numbers">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    ...
                    <option value="100000">100000</option>
                </select>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title">Numbers</div>
                    </div>
                </div>
            </a>
        </li>
    </ul>
</div>

If you need to specify list item height in virtual list, you may add additional data-virtual-list-height attribute:

<div class="list-block">
    <ul>
        <li>
            <!-- data-virtual-list-height="55" attribute to set virtual list single item height to 55px -->
            <a href="#" class="item-link smart-select" data-virtual-list="true" data-virtual-list-height="55">
                <select name="numbers">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    ...
                    <option value="100000">100000</option>
                </select>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title">Numbers</div>
                    </div>
                </div>
            </a>
        </li>
    </ul>
</div>

Smart Select Color Themes

You can also specify form and navbar color themes on smart select page or in smart select popup using data-form-theme and data-navbar-theme attributes:

<div class="list-block">
    <ul>
        <li>
            <!-- data-navbar-theme="red" to set red color theme for navbar -->
            <!-- data-form-theme="green" to set green color theme for form -->
            <a href="#" class="item-link smart-select" data-navbar-theme="red" data-form-theme="green">
                <select name="car">
                    ...
                </select>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title">Car</div>
                    </div>
                </div>
            </a>
        </li>
    </ul>
</div>

Set Smart Select Value By Option Text

It is possible to set smart select (and its select) value depending on selected option value. For this case we need to add additional "smart-select-value" class to "item-after":

<div class="list-block">
  <ul>
    <li>
      <a href="#" class="item-link smart-select">
        <!-- select -->
        <select name="fruits">
          <option value="apple">Apple</option>
          <option value="pineapple">Pineapple</option>
          ...
        </select>
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title">Fruit</div>
            <!-- Additional "smart-select-value" class to set selected option depending on this text value -->
            <div class="item-after smart-select-value">Apple</div>
          </div>
        </div>
      </a>
    </li>
  </ul>
</div> 

After that <option> with "Apple" text value will be set as selected.

Open Smart Select Using JavaScript

It is also possible to "open" smart select with JavaScript. We need to use related App method:

myApp.smartSelectOpen(smartSelect) - open specified smart select

  • smartSelect - HTMLElement or string (with CSS Selector) of required ".smart-select". Required.

Add Options Dynamically

It is possible to add Smart Select options later dynamically, if it is even already opened. We need to use appropriate App method:

myApp.smartSelectAddOption(select, optionHTML, index) - add option to select at specified index

  • select - HTMLElement or string (with CSS Selector) of Smart Select's <select> or <optgroup>. Required.
  • optionHTML - string with HTML of option to add. Required.
  • index - number index number for new option. If not specified, then option will be added to the end

For example:

// Append option
myApp.smartSelectAddOption('.smart-select select', '<option value="apple">Apple</option>');
 
// Add new option as first selected option
myApp.smartSelectAddOption('.smart-select select', '<option value="apple" selected>Apple</option>', 0);
 
// Append new option to second <optgroup>
myApp.smartSelectAddOption($$('.smart-select select optigroup').eq(1), '<option value="apple">Apple</option>', 0);