Combobox

v0.0.0

The Combobox is a combination between a text field and a list.

When people start typing the list shows suggestions. Only values from the list can be selected.

<!-- Form  -->
<form action="#form-3ad164" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-ac23a0">Product
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <!-- Combobox  -->
    <div class="vi-combobox" data-form-field-proxy="true">
      <select aria-required="true" class="vi-combobox__select" id="control-ac23a0" name="name-435a16" placeholder="Product" required>
        <option disabled hidden="hidden" selected value="">Product</option>
        <option data-extra="one" value="product-1">product 1</option>
        <option data-extra="two" value="product-2">product 2</option>
        <option data-extra="three" value="forage-loko-meh-synth-everyday-kinfolk-deep-v-street-tousled-brooklyn-distillery-vhs-kombucha-godard-authentic-celiac-roof-gluten-free-direct-trade-crucifix-90-s">Forage loko meh synth everyday kinfolk deep v. Street tousled brooklyn distillery vhs. Kombucha godard authentic. Celiac roof gluten-free direct trade crucifix 90's.</option>
      </select>
    </div>
  </div>
</form>

Accent #

Conform the form styling, when the form is using modifier --accent the combobox uses the correct coloring.

<!-- Form (mods: --accent) -->
<form action="#form-255bcc" autocomplete="off" class="vi-form vi-form--accent vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-1011e5">Product
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <!-- Combobox  -->
    <div class="vi-combobox" data-form-field-proxy="true">
      <select aria-required="true" class="vi-combobox__select" id="control-1011e5" name="name-caa556" placeholder="Product" required>
        <option disabled hidden="hidden" selected value="">Product</option>
        <option value="product-1">product 1</option>
        <option value="product-2">product 2</option>
        <option value="product-3">product 3</option>
        <option value="product-4">product 4</option>
      </select>
    </div>
  </div>
</form>

Complex data #

When more complex data is required, pass custom attribute data-combobox-options to the element with class .vi-combobox and omit the <option> tags.

The value of this attribute is a json string.

<!-- Form  -->
<form action="#form-696c39" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-06c455">Product
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <!-- Combobox  -->
    <div class="vi-combobox" data-combobox-options='[{"title":"Title of option 1","caption":"Caption of option 1","value":"Value of option 1"},{"title":"Title of option 2","caption":"Long caption of option 2 Occupy chicharrones knausgaard gentrify freegan carry neutra mustache portland semiotics artisan salvia pickled readymade meditation mlkshk slow-carb selfies blog vegan drinking retro +1 helvetica hoodie.","value":"Value of option 2"},{"title":"Long title of option 3 Kogi paleo migas keytar pug ramps tousled brunch quinoa disrupt ugh chartreuse artisan celiac mixtape.","caption":"Caption of option 3","value":"Value of option 3"}]' data-form-field-proxy="true">
      <select aria-required="true" class="vi-combobox__select" id="control-06c455" name="name-903301" placeholder="Product" required>
      </select>
    </div>
  </div>
</form>

The json string contains an array of objects, where each object has the following attributes:

value (required)
title (required)
caption (optional)

When the caption is omitted the formatting of the list-options looks the same as when using <option> tags.

[
{
"title": "Title of option 1",
"caption": "Caption of option 1",
"value": "Value of option 1"
},
{
"title": "Title of option 2",
"caption": "Long caption of option 2 Occupy chicharrones knausgaard gentrify freegan carry neutra mustache portland semiotics artisan salvia pickled readymade meditation mlkshk slow-carb selfies blog vegan drinking retro +1 helvetica hoodie.",
"value": "Value of option 2"
},
{
"title": "Long title of option 3 Kogi paleo migas keytar pug ramps tousled brunch quinoa disrupt ugh chartreuse artisan celiac mixtape.",
"caption": "Caption of option 3",
"value": "Value of option 3"
}
]

Set Options #

To set options dynamicly use $(..).viCombobox('setOptions', values)

The shape of values is {label:string, value:string}[] for normal and {title:string, caption:string, value:string}[] for 'complex data' comboboxes.

For complex data, pass an empty array to custom attribute data-combobox-options.

<!-- Form  -->
<form action="#form-2b65e9" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-c94ab2">Product
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <!-- Combobox  -->
    <div class="vi-combobox" data-combobox-options="[]" data-form-field-proxy="true" id="example">
      <select aria-required="true" class="vi-combobox__select" id="control-c94ab2" name="name-3a87b1" placeholder="Product" required>
      </select>
    </div>
  </div>
</form>
<hr>
<!-- Button type: solid  -->
<button id="trigger" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">setOptions</button>
<script>
  $('#trigger').on('click', function() {
    $('#example').viCombobox('setOptions', [
      {
        value: 'hello',
        title: 'Hello',
        caption: 'The caption text of Hello'
      },
      {
        value: 'world',
        title: 'World',
        caption: 'The caption text of World'
      }
    ])
  })
</script>

Validation #

An example of using validation.

<!-- Form  -->
<form action="#form-835491" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-d2a8b2">Product
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <!-- Combobox  -->
    <div class="vi-combobox" data-form-field-proxy="true">
      <select aria-required="true" class="vi-combobox__select" data-msg-success="Success" data-msg="Please select from the list" id="control-d2a8b2" name="name-eec780" placeholder="Product" required>
        <option disabled hidden="hidden" selected value="">Product</option>
        <option data-extra="one" value="product-1">product 1</option>
        <option data-extra="two" value="product-2">product 2</option>
        <option data-extra="three" value="muggle-magic-messenger-bag-mixtape-farm-to-table-meh-street-shabby-chic-photo-booth-green-juice-whatever-echo-lumbersexual-occupy-artisan-messenger-bag-godard-fingerstache-lumbersexual-chia-single-origin-coffee-tumblr-tote-bag-salvia-shabby-chic-lumbersexual-lomo">Muggle magic messenger bag mixtape farm-to-table meh. Street shabby chic photo booth green juice whatever echo lumbersexual occupy. Artisan messenger bag godard fingerstache lumbersexual chia. Single-origin coffee tumblr tote bag salvia shabby chic lumbersexual lomo.</option>
      </select>
    </div>
  </div>
  <!-- Button type: solid  -->
  <button type="submit" class="vi-btn-solid vi-btn">Synth distillery</button>
</form>

Reset #

To reset the Combobox use:

<!-- <div class="vi-combobox">...</div> -->
<script>
  $('#my-combo').viCombobox('reset');
</script>

Endpoint #

Endpoint is optional. Point data attribute data-endpoint to a valid endpoint to show the autosuggest.

Options:

data-endpoint: (optional) the URL to an endpoint
data-throttle: (optional) ms to throttle requesting endpoint, default 200ms.
data-min-chars: (optional) minimum chars required before starting to search, default 3.

<!-- Form  -->
<form action="#form-010358" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-c97d66">Product
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <!-- Combobox  -->
    <div class="vi-combobox" data-endpoint="/api/combobox/results.json" data-form-field-proxy="true">
      <select aria-required="true" class="vi-combobox__select" data-msg-success="Success" data-msg="Please select from the list" id="control-c97d66" name="name-82870c" placeholder="Product" required>
      </select>
    </div>
  </div>
</form>

All data attributes except for data-endpoint, data-throttle, data-min-chars will be added as querystring parameters.

Format is data-{key}="{value}", where key is the name if the querystring parameters and value is the value.

Stylesheets #

The following stylesheets are required to display this component.

The following additional stylesheet is used to display the example(s).

Download Button Stylesheet

JavaScript #

The following javascripts are required to display this component.

Usage documentation #

Usage documentation can be found here.

Usage Documentation

Changelog #

Changelog

Fix

  06 Jun 2023 Prevent hidden select to take up more than 100% width.
  06 Jun 2023 Fix dropdown position when dropup and multiline-option is deleted.
  05 Jun 2023 Regression: User agent stylesheet overrides combobox input color.
  01 Jun 2023 Use new proxy data-attribute for correct validation message placement.
  01 Jun 2023 Changed styling according to new design specifiec in call Wim.
  01 Jun 2023 Fix newline in combobox when active, to prevent combobox SPC search button from jumping.
  15 Feb 2023 Combobox validation
  07 Nov 2022 Allow multiline content in combobox.
  14 Sep 2022 Keep panel in viewport.


Changed

  13 Jun 2023 Combobox endpoint
  12 Jun 2023 Optimisation combobox first render.


Added

  15 Feb 2023 Combobox reset
  14 Sep 2022 Add setOptions method.
  14 Sep 2022 Keep data attributes from options.
  29 Aug 2022 Initial draft