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-58a793" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-409c2e">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-409c2e" name="name-70ee95" 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="hammock-goth-direct-trade-paleo-normcore-dreamcatcher-wayfarers-ugh-you-probably-haven-t-heard-of-them-five-dollar-toast-church-key-artisan-offal-iphone-slow-carb-retro-fingerstache-cray-pbr-b-phlogiston-yolo-raw-denim-knausgaard-you-probably-haven-t-heard-of-them">Hammock goth direct trade paleo normcore. Dreamcatcher wayfarers ugh you probably haven't heard of them five dollar toast church-key. Artisan offal iphone slow-carb retro fingerstache cray. Pbr&amp;b phlogiston yolo raw denim knausgaard you probably haven't heard of them.</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-80e3ca" autocomplete="off" class="vi-form vi-form--accent vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-620881">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-620881" name="name-736560" 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-b4262c" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-b898c3">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 Kinfolk thundercats tattooed williamsburg sriracha lumbersexual cliche kogi umami artisan irony etsy cold-pressed wayfarers diy pour-over beard paleo franzen brunch tofu cornhole post-ironic roof mlkshk.","value":"Value of option 2"},{"title":"Long title of option 3 Occupy 8-bit swag xoxo etsy locavore selfies park poutine ennui readymade intelligentsia venmo park semiotics.","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-b898c3" name="name-0bc23e" 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 Kinfolk thundercats tattooed williamsburg sriracha lumbersexual cliche kogi umami artisan irony etsy cold-pressed wayfarers diy pour-over beard paleo franzen brunch tofu cornhole post-ironic roof mlkshk.",
"value": "Value of option 2"
},
{
"title": "Long title of option 3 Occupy 8-bit swag xoxo etsy locavore selfies park poutine ennui readymade intelligentsia venmo park semiotics.",
"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-74e067" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-085b4a">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-085b4a" name="name-aa7e5c" 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-bb6dba" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-99c8e6">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-99c8e6" name="name-826631" 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="ethical-90-s-cliche-organic-vegan-deep-v-keffiyeh-mumblecore-hashtag-listicle-pickled-keytar-pop-up-jean-shorts-poutine-narwhal-church-key-beard-bespoke-poutine-plaid-brunch-bespoke-90-s-master-taxidermy-brunch-lo-fi-wolf">Ethical 90's cliche organic vegan deep v keffiyeh mumblecore. Hashtag listicle pickled keytar. Pop-up jean shorts poutine narwhal church-key beard bespoke. Poutine plaid brunch bespoke 90's. Master taxidermy brunch lo-fi wolf.</option>
      </select>
    </div>
  </div>
  <!-- Button type: solid  -->
  <button type="submit" class="vi-btn-solid vi-btn">Typewriter 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-aa0244" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-806720">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-806720" name="name-e1170b" 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