AndyJames
10/2/2019 - 8:48 PM

Checkbox Filter

Checkbox Filter - Single
content_copyfile_download
<div class="ss-component">
  <h1>Multi Checkbox</h1>
  <p>
    <b>Multi select</b> Includes all selected items
  </p>
  <div v-for="(item) in filters['city']">
   <div class="input-group">
      <input
        type="checkbox"
        fs-fields="amenities"
        v-model="checkBoxFilter1"
        v-on:change="checkBoxFilter('checkBoxFilter1', $event)"
        :value="item.key"
      />
      <label :for="item.key">{{ item.key }}</label>
    </div>
    <div>{{item.doc_count}}</div>
  </div>
</div>
Checkbox Filter - Multi
content_copyfile_download
<div class="ss-component">
  <h1>Multi Checkbox</h1>
  <p>
    <b>Multi select</b> Includes all selected items
  </p>
  <div v-for="(item) in filters['city']">
   <div class="input-group">
      <input
        type="checkbox"
        fs-fields="amenities"
        fs-multi="true"
        v-model="checkBoxFilter1"
        v-on:change="checkBoxFilter('checkBoxFilter1', $event)"
        :value="item.key"
      />
      <label :for="item.key">{{ item.key }}</label>
    </div>
    <div>{{item.doc_count}}</div>
  </div>
</div>
checkBoxFilter Method
content_copyfile_download
/**
 * Single & Multi Checkbox Filter
 *
 * @param {$event} event is always $event
 * @param {boolean} [isMulti=false]
 * @param {string}  model checkBoxFilter1 - checkBoxFilter10
 */
checkBoxFilter(model, $event)
Notes
content_copyfile_download
  • Rendered
  • Source

Limitation with multi

Multi only works if you are searching multi item references.

When using fs-multi="true" the folloiwing must be remembered:

eg: If searching for city where only 1 city is tied to every listing this wont work

eg: If searching for amenities where multiple amenities are tied to every listing this will work

Single Checkboxes

To enable single checkboxes set multi to false and ss-action="filter"

Multi Checkboxes

To enable multi checkboxes all you need to do it set multi to true and ss-action="orFilter"