Language: ENCN

Search Bar Vue Component

Search Bar Vue component represents Framework7's Search Bar component.

Usage example

<f7-searchbar
  cancel-link="Cancel"
  placeholder="Search in items"
  :clear-button="true"
></f7-searchbar>

Renders to:

<form class="searchbar">
  <div class="searchbar-input">
    <!-- Input -->
    <input type="search" placeholder="Search in items">
    <!-- Clear button -->
    <a href="#" class="searchbar-clear"></a>
  </div>
  <!-- Cancel Link -->
  <div class="searchbar-cancel">Cancel</div>
</form>

Here is how it can be used in Vue component with initialization

<template>

  <!-- Search bar -->
  <f7-searchbar
    <!-- Cancel link's text (affects iOS theme only) -->
    cancel-link="Cancel"
    <!-- Where to search -->
    search-list="#search-list"
    <!-- Input placeholder text -->
    placeholder="Search in items"
    <!-- Show "clear" button -->
    :clear-button="true"
    <!-- Events -->
    @searchbar:search="onSearch"
    @searchbar:enable="onEnable"
    @searchbar:disable="onDisable"
    @searchbar:clear="onClear"
  ></f7-searchbar>

  <!-- Will be visible if there is no any results found, defined by "searchbar-not-found" class -->
  <f7-list class="searchbar-not-found">
    <f7-list-item title="Nothing found"></f7-list-item>
  </f7-list>

  <!-- Search-through list -->
  <f7-list class="searchbar-found" id="search-list">
    <f7-list-item v-for="item in items" :title="'Item ' + item"></f7-list-item>
  </f7-list>

</template>

<script>
  export default {
    data: function () {
      return {
        items: (function () {
          var it = [];
          for (var i = 0; i < 100; i++) it.push(i+1);
          return it;
        })()
      }
    },
    methods: {
      onSearch: function (query, found) {
        console.log('search', query);
      },
      onClear: function (event) {
        console.log('clear');
      },
      onEnable: function (event) {
        console.log('enable');
      },
      onDisable: function (event) {
        console.log('disable');
      },
    }
  }
</script>

Slots

Search Bar Vue component has additional slots for custom elements:

  • before-input - element will be inserted right before <input type="search"> element
  • after-input - element will be inserted right after <input type="search"> element
<f7-searchbar
  cancel-link="Cancel"
  placeholder="Search in items"
  :clear-button="true"
>
  <div slot="before-input">Before Input</div>
  <div slot="after-input">After Input</div>
</f7-searchbar>

Renders to:

<form class="searchbar">
  <div class="searchbar-input">
    <div>Before Input</div>
    <input type="search" placeholder="Search in items">
    <div>After Input</div>
    <a href="#" class="searchbar-clear"></a>
  </div>
  <div class="searchbar-cancel">Cancel</div>
</form>

Properties

You can pass all parameters in single params property or use separate props for each parameter to specify them via component attributes:

Prop Type Default Description
form boolean true Main search bar element will be used as a form tag instead of div
placeholder string "Search" Input placeholder text
cancel-link string Cancel link text. Affects only iOS theme
clear-button boolean true Enables "clear" input button
init boolean true Initializes Search Bar
params Object Object with Search Bar API parameters
params separate props
searchList string/object CSS selector or HTML element of list block to search
searchIn string '.item-title' CSS selector of List View element's field where we need to search. Usually we search through element titles ('.item-title'). It is also to pass few elements for search like '.item-title, .item-text'
found string/object CSS selector or HTMLElement of searchbar "found" element. If not specified, searchbar will look for .searchbar-found element on page
notFoud string/object CSS selector or HTMLElement of searchbar "not-found" element. If not specified, searchbar will look for .searchbar-not-found element on page
overlay string/object CSS selector or HTMLElement of searchbar overlay. If not specified, searchbar will look for .searchbar-overlay element on page
ignore string '.searchbar-ignore' CSS selector for items to be ignored by searchbar and always present in search results
customSearch boolean false When enabled searchbar will not search through any of list blocks specified by `searchList` and you will be able to use custom search functionality, for example, for calling external APIs with search results and for displaying them manually
removeDiacritics boolean false Enable to remove/replace diacritics (á, í, ó, etc.) during search
hideDividers boolean true If enabled, then search will consider item dividers and group titles and hide them if there are no found items right after them
hideGroups boolean true If enabled, then search will consider list view groups hide them if there are no found items inside of these groups

Methods

.empty() Clear search query and update results
.search(query) Force searchbar to search passed query
.enable() Enable/activate searchbar
.disable() Disable/deactivate searchbar

Events

Event Description
searchbar:search Event will be triggered during search (search field change). Event detail contains search query (e.detail.query) and array of found HTML elements (e.detail.foundItems)
searchbar:clear Event will be triggered when user clicks on Search Bar's "clear" element (a href="#" class="searchbar-clear")
searchbar:enable Event will be triggered when Search Bar becomes active
searchbar:disable Event will be triggered when Search Bar becomes inactive - when user clicks on "Cancel" button (a href="searchbar-cancel") or on "searchbar-overlay" element
change Event will be triggered when "change" event occurs on search bar input element
input Event will be triggered when "input" event occurs on search bar input element
focus Event will be triggered when "focus" event occurs on search bar input element
blur Event will be triggered when "blur" event occurs on search bar input element
click:clear Event will be triggered when user clicks on input "clear" button
click:cancel Event will be triggered when user clicks on "cancel" link

Access To Initialized Instance

If you use automatic initalization to init Search Bar (with init:true prop) and need to use its Methods and Properties you can access its initialized instance by accessing .f7Searchbar component's property.