Filters and Search

Haven renders filter UI into an external container you provide. Filters update the listing in real time without a page reload.

Setup

HTML

<div id="haven-filter-directory"></div>
<div id="haven-app"></div>

Configuration

options: {
  filter: {
    selector: '#haven-filter-directory',
    maxWidth: 1280,
    fields: {
      keyword: { /* search field */ },
      types: { /* dropdown field */ },
    },
  },
}

The filter.maxWidth inherits from options.maxWidth if not set.

Field types

Search (keyword)

keyword: {
  type: 'search',
  id: 'haven-keyword-filter',
  name: 'k',
  css: 'haven-filter--keyword',
  placeholder: 'Filter by Keyword',
  minChars: 3,
  icon: '<i class="fa fa-search"></i>',
}

Property	Description
type	Must be 'search'
id	HTML id for the input
name	Query parameter name
minChars	Minimum characters before filtering
icon	HTML icon (requires Font Awesome)
placeholder	Input placeholder text

Dropdown (types)

types: {
  type: 'dropdown',
  id: 'haven-type-filter',
  name: 'types',
  css: 'haven-filter--types',
  dropdownText: {
    placeholder: 'Filter by Type',
    txtSelected: 'Selected',
    txtAll: 'All Types',
    txtRemove: 'Remove',
  },
}

Property	Description
type	Must be 'dropdown'
name	Query parameter name
dropdownText	Label overrides for the dropdown UI

Date picker (calendar)

date: {
  type: 'datepicker',
  id: 'haven-date-filter',
  name: 'date',
  css: 'haven-filter--date',
}

Used in calendar views to filter events by date.

Toggle

myToggle: {
  type: 'toggle',
  id: 'haven-toggle-filter',
  name: 'featured',
}

Persisting filter state

Haven can save filter values to localStorage:

// Read saved values
var saved = haven.getFilterValues('directory');

// Save values
haven.setFilterValues('directory', { k: 'coffee', types: ['CAFE'] });

// Clear saved values
haven.setFilterValues('directory', null);

Persistence requires browser localStorage support.

Events

Listen for filter-related events on document:

document.addEventListener('havenFilterReady', function (e) {
  console.log('Filter UI is ready');
});

document.addEventListener('havenFilterToggle', function (e) {
  console.log('Toggle changed', e.detail);
});

document.addEventListener('havenFilterDropdown', function (e) {
  console.log('Dropdown changed', e.detail);
});

See Events.

Tips

• Set useFontAwesome: true when using icon HTML in search fields.
• Place the filter container above the app container for natural reading order.
• Theme CSS (haven-theme--default.css) includes base filter styles.