Foundation Combobox

We had previously used a Combobox that was styled with Bootstrap. One of our newer projects is using Foundation 6 so we re-purposed the Bootstrap Combobox for Foundation.

How to use it

The dependencies are the Foundation 6 styles (CSS or LESS) and jQuery. Include it and then the stylesheet(CSS or LESS) and javascript.

Then just activate the plugin on a normal select box(suggest having a blank option first):

<select class="combobox">
  <option></option>
  <option value="PA">Pennsylvania</option>
  <option value="CT">Connecticut</option>
  <option value="NY">New York</option>
  <option value="MD">Maryland</option>
  <option value="VA">Virginia</option>
</select>

<script type="text/javascript">
  $(document).ready(function(){
    $('.combobox').combobox();
  });
</script>

Options

When activating the plugin, you may include an object containing options for the combobox

$('.combobox').combobox({optionname: 'optionvalue'});

menu: Custom markup for the dropdown menu list element.

item: Custom markup for the dropdown menu list items.

matcher: Custom function with one item argument that compares the item to the input. Defaults to matching on the query being a substring of the item, case insenstive

sorter: Custom function that sorts a list items for display in the dropdown

highlighter: Custom function for highlighting an item. Defaults to bolding the query within a matched item

template: Custom function that returns markup for the combobox.

Dependencies

Uses the latest 1.X version of jQuery and the Foundation 6.

License

Licensed under the GNU GENERAL PUBLIC LICENSE v3