ComboBoxComponent

ComboBoxComponent is a very lightweight and dependency-free web component written in pure JavaScript.

Example 1

You can pass the items configuration option if you want to use default list items. You can also pass a onSelect callback to execute when the user select an item from the list. The main use case, as you can see, is to synchronize another combobox, but it's totally up to you what to do with this callback function.

 /* offices object */
const offices = [
  { id: "33", name: "Alghero Aeroporto - AHO", descr: "Desk in terminal" },
  /* ... */
];

new ComboBox( 'pickup-input', { items: offices, onSelect: sync } );
const dropoff = new ComboBox( 'dropoff-input', { items: offices } );

function sync( li ) {
  dropoff.select( li );
}

 <!-- Don't forget the combobox-container class for the div -->
<div class="combobox-container">
  <label for="pickup-input">Select pickup office</label>
  <!-- Don't forget id attribute for the input element -->
  <input type="text" id="pickup-input" placeholder="Enter city or airport code">
</div>

<div class="combobox-container">
  <label for="dropoff-input">Select dropoff office</label>
  <input type="text" id="dropoff-input" placeholder="Enter city or airport code">
</div>

View source

Select pickup office

Select dropoff office

Example 2

If you add the icon: 'whatever' property to items configuration object and you provide a css class icon-whatever you will be able to use icons (available space 40x40px). You can also pass a onFilter callback as a configuration option to execute when the list is created/updated. This callback must return a boolean: a falsy value will exclude corrisponding item. Usually there will be an additional property in your items object to check in the callback, in this case electric_cars. Finally, the optional highlight_color option will change the background color for highlighted items.

 /* offices object */
const offices2 = [
  { id: "33", name: "Alghero Aeroporto - AHO", descr: "Desk in terminal", icon: 'airport', electric_cars: 0 },
  /* ... */
];

new ComboBox( 'green-location', { items: offices2, onFilter: filter, highlight_color: '#ffc' } );
function filter( item ) {
  const { electric_cars } = item;
  return ( electric_cars ) ? true : false;
}

 <!-- Don't forget the combobox-container class for the div -->
  <div class="combobox-container">
  <label for="green-location">Select green location</label>
  <!-- Don't forget id attribute for the input element -->
  <input type="text" id="green-location" placeholder="Enter city or airport code">
</div>

View source

Select green location

Example 3

If endpoint configuration option exists, you'll fetch items from a remote endpoint. The component will append the string typed by the user to the end of the endpoint URL. Remember: every single item of the JSON object returned must have id, name and descr properties or you'll get an error. To transform items you can use onFetch callback.

 new ComboBox( 'itcities', { endpoint: 'http://yourdomain.com/endpoint/', onFetch: returnItems } );

function returnItems( json ) {
  let itcities = [];
  if( json.Status === '00' && json.Itcities ) {
    itcities = json.Itcities.map( item => {
      return { id: item.CC, name: item.CityName, descr: item.Descr }
    } );
  }

  return itcities;
}

 <!-- Don't forget the combobox-container class for the div -->
  <div class="combobox-container">
  <label for="itcities">Select an italian city</label>
  <!-- Don't forget id attribute for the input element -->
  <input type="text" id="itcities" placeholder="Type and select">
</div>

View source

Select an italian city