Cacher is the code snippet organizer for pro developers

<div class="ss-component">
  <h1>Component Name</h1>
  <div class="filter-search">
    <div>
      <input
        type="text"
        placeholder="Search neighbourhoods"
        v-on:input="filterSearch('filterSearch1', 'city', $event)"
        v-on:focus="filterSearch('filterSearch1', 'city', $event)"
        v-model="filterSearch1.value"
      />
      <a class="close" v-on:click="resetFilterSearch('filterSearch1')"></a>
    </div>
    <div v-if="filterSearch1.searching" class="filter-search-results">
      <div v-for="result in filterSearch1.results">
        <a
          fs-fields="city"
          v-on:click="filterSearchQuery('filterSearch1', result.key, $event)"
          class="filter-search-item"
        >{{result.key}}</a>
      </div>
    </div>
  </div>
</div>

/**
 * Searches the filter
 *
 * @param {$event} event is always $event
 * @param {string} filter the elastic data column to filter
 * @param {string} model filterSearch1 - filterSearch10
 */
filterSearch(model, filter, event)

/**
 * Updates the search results when an item is clicked
 *
 * @param {$event} event Accepts html event
 * @param {*} model
 * @param {*} value The value to perform the search with
 */
filterSearchQuery(model, value, event);

/**
 * Resets the filter search to be enoty
 *
 * @param {$event} event is always $event
 * @param {string} filter the name of the filter to reset
 * @param {string} model filterSearch1 - filterSearch10 - Must be unique
 */
resetFilterSearch(model)