Home - Hybrid HTML Dropdown

This is an HTML dropdown widget that can replace a <select/> field or built using a JSON object which can be fully customised using css.

Getting started Get it on GitHub

The main features are

selection and navigation using arrow/esc/tab/space bar/enter keys
fully styled using CSS
initialised using existing <select/> form field
initialised using embedded JSON objects.
build complex embed and grouped lists.
restrain selection to any integer limit.
filter list displayed in the dropdown.

See the YouTube videos,

How to use it?

Download the latest release and uncompress the library into your project.

Include the minified CSS stylesheet in the head of your HTML file,

<link rel="stylesheet" href="./hybrid-html-dropdown/hybrid-dropdown.css" media="all">

and the minified js file in your footer,

<script src="./hybrid-html-dropdown/hybrid-dropdown.js" type="text/javascript"></script>

If you have an existing <select/> field,

<select id="my-list" name="list_field">
   ...
</select>

you can convert it to a hybrid dropdown,

<script type="text/javascript">
  (function(){
    let sel, hyd;
    document.addEventListener('DOMContentLoaded', (e) => {  //instantiate on document ready.
      sel= document.querySelector('#my-list');
      hyd = new HybridDropdown(sel,{});
    })
  })
  </script>

However, you can also

build a hybrid field from a JSON object

allowing for

multi-level nesting

You can further customise the hybrid with

optional settings

A hybrid dropdown can be instantiated from a JSON data object embedded within the element on which the dropdown will be created,

Simple lists

<divid="json-field">
    <script type="application/json">
      {
        "":"Select a dish",an option is made of a key:value pair by default
        "ps":"Pumpkin sushi",
        "as":"Avocado sushi",
        "tc":"Tomato sushi",
        "cs":"Carrot sushi"
      }
    </script>
</div>
      
    

and is initialised with,

<script type="text/javascript">
  (function(){
    let el, hyd;
    document.addEventListener('DOMContentLoaded', (e) => {  //instantiate on document ready.
      sel= document.querySelector('#json-field');
      hyd = new HybridDropdown(el,{});
    })
  })
</script>

NOTE: the plugin expects the JSON object to be embedded within the element on which it is initialised. Alternatively, a JSON object can passed in the settings constructor using the dataSet option,

new HybridDropdown(el,{
  dataSet: {
    "":"Select a dish",
    "ps":"Pumpkin sushi",
    "as":"Avocado sushi",
    "tc":"Tomato sushi",
    "cs":"Carrot sushi"
  }
});

which results in,

Grouped lists

the plugin accepts the following JSON object for grouped lists, whereby the notion of grouping is the same as for <select/> fields, where a group has a title which is not itself an option,

<div id="json-field">
  <script type="application/json">
    {
      "":"Select a dish",
      "Sushi":{this is a group title, it has no value so the key is assumed as the title.
        "ps":"Pumpkin sushi",these are listed as child options
        "as":"Avocado sushi",
        "tc":"Tomato sushi",
        "cs":"Carrot sushi"
      },
      "Dosa":{
        "pd":"Plain dosa",
        "md":"Masala dosa",
        "myd":"Mysore dosa",
        "pr":"Paper roast"
      }
    }
   </script>
</div>

which results in,

Nested lists

nested lists are similar to grouped list, except that the a child parents are themselves options which can be selected. To achieve this the plugin expects a group object to have label key, indicating that the group key is an option,

<div id="json-field">
  <script type="application/json">
    {
      "":"Select a dish",
      "Japan":{this is a group title as the previous construct
        "sushi":{this will not be interpreted as a parent option
          "label":"Sushi",the label key used for the sushi option
          "ps":"Pumpkin sushi",
          "as":"Avocado sushi",
          "tc":"Tomato sushi",
          "cs":"Carrot sushi"
        }
      }
    }
   </script>
</div>

More complex data constructs

It is possible to construct more complex dataset structures such as including classes, data attributes or even images for each options, but this require the hybrid field to be initialised with a custom optionList function setting so as to instruct the plugin how to interpret the dataSet passed at initialisation. For an example see the custom image dropdown field in the Examples section.

Configuring the hybrid list object.

The HybridDropdown object can be configured using settings parsed at the time of object instantiation or as data- attributes on the HTML element itself. Optional functions need to be configured as object settings at the time of instantiation. See the option page for a full list of configuration settings.

For example, the following hybrid dropdown is configured to allow multiple selections limited to a maximum of 3,

let hyd = new HybridDropdown(el,{
  'limitSelection':3
});

this can also be configured on the HTML element using data- attributes,

<div id="my-list" data-limit-selection="3">
   <script type="application/json">
    {
      "":"Select a value",
     ...
    }
   </script>
</div>

Hybrid HTML Dropdown field