Combo box

CSS file | JS file

The combo box is a <select> box that provides auto suggestions based on user input. You can either type something into the field to get filtered suggestions based on your input, or use the button to get the full list of selections.

The input is read from an existing select-element for progressive enhancement.

<label for="combobox">Select a BOS</label>
<div class="ui-widget sba-c-combobox">
  <select id="combobox" name="combobox">
    <option value="">Select one...</option>
    <option value="Aaron Rogers">Aaron Rogers</option>
    <option value="Arlene Baker">Arlene Baker</option>
    <option value="Barrett Foster">Barrett Foster</option>
    <option value="Bernice Jones">Bernice Jones</option>
    <option value="Catherine Masterson">Catherine Masterson</option>
    <option value="Christine Amici">Christine Amici</option>
    <option value="Connor Fitzpatrick">Connor Fitzpatrick</option>
    <option value="David Masterson">David Masterson</option>
    <option value="Don Huffman">Don Huffman</option>
    <option value="Erin Botz">Erin Botz</option>
    <option value="Freddie McDaniel">Freddie McDaniel</option>
    <option value="Gertrude Polanter">Gertrude Polanter</option>
    <option value="Henry Nichols">Henry Nichols</option>
    <option value="Jamie Ngo">Jamie Ngo</option>
    <option value="Jennifer Vollaley">Jennifer Vollaley</option>
    <option value="Liz Redman">Liz Redman</option>
    <option value="Paul Stevenson">Paul Stevenson</option>
    <option value="Penelope Martin">Penelope Martin</option>
    <option value="Rachel Walton">Rachel Walton</option>
    <option value="Richard Engleton">Richard Engleton</option>
    <option value="Steven Greymore">Steven Greymore</option>
    <option value="Timothy Grant">Timothy Grant</option>
  </select>
</div>
<script>
  $(function() {
    $( "#combobox" ).combobox({
      select: function(event, ui) {
            $( "#combobox" ).trigger("change");
         }
    });
  });
</script>

Guidance

• This componenent is based on the jQuery UI Autosuggest Combobox.
• Selecting an item from the list triggers change event on the underlying <select> box.
• If the combobox is required, the required attribute will convey if applied to the source <select> box.