Searchbar Vue Component

Searchbar Vue component represents Framework7's Searchbar component.

Searchbar Components

There are following components included:

f7-searchbar

Searchbar 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
<f7-searchbar> properties
init	boolean	true	Initializes Searchbar
value	string number		Allows to specify Searchbar input's value. Can be useful when used with `custom-search` enabled
form	boolean	true	Main searchbar element will be used as a `form` tag instead of `div`
placeholder	string	"Search"	Input placeholder text
disable-button	boolean	true	Enables disable button
disable-button-text	string	Cancel	Disable button text
clear-button	boolean	true	Enables searchbar input clear button
expandable	boolean	false	Enables expandable searchbar
inline	boolean	false	Enables inline searchbar
spellcheck	boolean		Sets `spellcheck` attribute on input element
search-container	string object		CSS selector or HTML element of list block to search
search-in	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'`
search-item	string	li	CSS selector of single search item. If we do a search in List View, then it must be a single list element `li`
search-group	string	.list-group	CSS selector of group element. Used when `hide-groups` enabled to hide groups. If we do a search in List View, then it usually a list group.
search-group-title	string	.list-group-title	CSS selector of group titles. Used when `hide-group-titles` enabled to hide group titles. If we do a search in List View, then it usually a list group title.
found-el	string object	.searchbar-found	CSS selector or HTMLElement of searchbar "found" element. If not specified, searchbar will look for `.searchbar-found` element on page
not-found-el	string object	.searchbar-not-found	CSS selector or HTMLElement of searchbar "not-found" element. If not specified, searchbar will look for `.searchbar-not-found` element on page
backdrop	boolean		Enables searchbar backdrop element. By default, disabled for inline searchbar
backdrop-el	string object		CSS selector or HTMLElement of searchbar backdrop element. If not passed and `backdrop` parameter is true then it will look for `.searchbar-backdrop` element. In case none found it will create one automatically
ignore	string	.searchbar-ignore	CSS selector for items to be ignored by searchbar and always present in search results
custom-search	boolean	false	When enabled searchbar will not search through any of list blocks specified by `search-container` and you will be able to use custom search functionality, for example, for calling external APIs with search results and for displaying them manually
remove-diacritics	boolean	false	Enable to remove/replace diacritics (á, í, ó, etc.) during search
hide-group-titles	boolean	true	If enabled, then search will consider group titles and hide them if there are no found items right after them
hide-groups	boolean	true	If enabled, then search will consider list view groups hide them if there are no found items inside of these groups
outline	boolean	true	Adds searchbar bottom thin border (hairline) for iOS theme

Searchbar Methods

<f7-searchbar> methods
.search(query)	Force searchbar to search passed query
.enable()	Enable/activate searchbar
.disable()	Disable/deactivate searchbar
.toggle()	Toggle searchbar
.clear()	Clear search query and update results

Searchbar Events

Event	Arguments	Description
<f7-searchbar> events
searchbar:search	(searchbar, query, previousQuery)	Event will be triggered during search (search field change). As an arguments event receives searchbar instance, search query and previous query
searchbar:clear	(searchbar, previousQuery)	Event will be triggered when user clicks on Searchbar input "clear" button. As an arguments event receives searchbar instance and previous query
searchbar:enable	(searchbar)	Event will be triggered when Searchbar becomes active
searchbar:disable	(searchbar)	Event will be triggered when Searchbar becomes inactive/disabled
change	(event)	Event will be triggered when "change" event occurs on searchbar input element
input	(event)	Event will be triggered when "input" event occurs on searchbar input element
focus	(event)	Event will be triggered when "focus" event occurs on searchbar input element
blur	(event)	Event will be triggered when "blur" event occurs on searchbar input element
click:clear	(event)	Event will be triggered when user clicks on input "clear" button
click:disable	(event)	Event will be triggered when user clicks on searchbar disable button

Searchbar Slots

Searchbar Vue component has additional slots for custom elements:

default - element will be inserted as a child of <div class="searchbar-inner"> element in the end. Same as inner-end slot
before-inner - element will be inserted right before <div class="searchbar-inner"> element
after-inner - element will be inserted right after <div class="searchbar-inner"> element
inner-start - element will be inserted as a child of <div class="searchbar-inner"> element in the beginning
inner-end - element will be inserted as a child of <div class="searchbar-inner"> element in the end
input-wrap-start - element will be inserted as a child of <div class="searchbar-input-wrap"> element in the beginning
input-wrap-end - element will be inserted as a child of <div class="searchbar-input-wrap"> element in the end

Without Slots:

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

<!-- Renders to: -->

<form class="searchbar">
  <div class="searchbar-inner">
    <div class="searchbar-input-wrap">
      <input type="search" placeholder="Search">
      <i class="searchbar-icon"></i>
      <span class="input-clear-button"></span>
    </div>
    <span class="searchbar-disable-button">Cancel</span>
  </div>
</form>

With Slots:

<f7-searchbar
  disable-button-text="Cancel"
  placeholder="Search in items"
  :clear-button="true"
>
  <div slot="inner-start">Inner Start</div>
  <div slot="inner-end">Inner End</div>
  <div slot="input-wrap-start">Input Wrap Start</div>
  <div slot="input-wrap-end">Input Wrap End</div>
  <div slot="before-inner">Before Inner</div>
  <div slot="after-inner">After Inner</div>
</f7-searchbar>

<!-- Renders to: -->

<form class="searchbar">
  <div slot="before-inner">Before Inner</div>
  <div class="searchbar-inner">
    <div slot="inner-start">Inner Start</div>
    <div class="searchbar-input-wrap">
      <div slot="input-wrap-start">Input Wrap Start</div>
      <input type="search" placeholder="Search">
      <i class="searchbar-icon"></i>
      <span class="input-clear-button"></span>
      <div slot="input-wrap-end">Input Wrap End</div>
    </div>
    <span class="searchbar-disable-button">Cancel</span>
    <div slot="inner-end">Inner End</div>
  </div>
  <div slot="after-inner">After Inner</div>
</form>

Searchbar v-model

f7-searchbar component supports v-model on value prop:

<template>
  ...
  <f7-searchbar
    search-container=".search-list"
    v-model:value="searchQuery"
  />
  ...
</template>
<script>
  export default {
    data() {
      searchQuery: '',
    },
    ...
  };
</script>

Examples

Usual Searchbar

searchbar.vue

<template>
  <f7-page>
    <f7-navbar title="Searchbar">
      <f7-subnavbar :inner="false">
        <f7-searchbar search-container=".search-list" search-in=".item-title"></f7-searchbar>
      </f7-subnavbar>
    </f7-navbar>
    <f7-list strong-ios outline-ios dividers-ios class="searchbar-not-found">
      <f7-list-item title="Nothing found" />
    </f7-list>
    <f7-list strong-ios outline-ios dividers-ios class="search-list searchbar-found">
      <f7-list-item title="Acura" />
      <f7-list-item title="Audi" />
      <f7-list-item title="BMW" />
      <f7-list-item title="Cadillac" />
      <f7-list-item title="Chevrolet" />
      <f7-list-item title="Chrysler" />
      <f7-list-item title="Dodge" />
      <f7-list-item title="Ferrari" />
      <f7-list-item title="Ford" />
      <f7-list-item title="GMC" />
      <f7-list-item title="Honda" />
      <f7-list-item title="Hummer" />
      <f7-list-item title="Hyundai" />
      <f7-list-item title="Infiniti" />
      <f7-list-item title="Isuzu" />
      <f7-list-item title="Jaguar" />
      <f7-list-item title="Jeep" />
      <f7-list-item title="Kia" />
      <f7-list-item title="Lamborghini" />
      <f7-list-item title="Land Rover" />
      <f7-list-item title="Lexus" />
      <f7-list-item title="Lincoln" />
      <f7-list-item title="Lotus" />
      <f7-list-item title="Mazda" />
      <f7-list-item title="Mercedes-Benz" />
      <f7-list-item title="Mercury" />
      <f7-list-item title="Mitsubishi" />
      <f7-list-item title="Nissan" />
      <f7-list-item title="Oldsmobile" />
      <f7-list-item title="Peugeot" />
      <f7-list-item title="Pontiac" />
      <f7-list-item title="Porsche" />
      <f7-list-item title="Regal" />
      <f7-list-item title="Saab" />
      <f7-list-item title="Saturn" />
      <f7-list-item title="Subaru" />
      <f7-list-item title="Suzuki" />
      <f7-list-item title="Toyota" />
      <f7-list-item title="Volkswagen" />
      <f7-list-item title="Volvo" />
    </f7-list>
  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7Searchbar,
  f7Subnavbar,
  f7List,
  f7ListItem,
  theme,
} from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7Searchbar,
    f7Subnavbar,
    f7List,
    f7ListItem,
  },
  data() {
    return {
      theme,
    };
  },
};
</script>

Expandable Searchbar

searchbar-expandable.vue

<template>
  <f7-page>
    <f7-navbar title="Searchbar">
      <f7-nav-right>
        <f7-link
          class="searchbar-enable"
          data-searchbar=".searchbar-demo"
          icon-ios="f7:search"
          icon-md="material:search"
        />
      </f7-nav-right>
      <f7-searchbar
        class="searchbar-demo"
        expandable
        search-container=".search-list"
        search-in=".item-title"
      />
    </f7-navbar>
    <f7-list strong-ios outline-ios dividers-ios class="searchbar-not-found">
      <f7-list-item title="Nothing found" />
    </f7-list>
    <f7-list strong-ios outline-ios dividers-ios class="search-list searchbar-found">
      <f7-list-item title="Acura" />
      <f7-list-item title="Audi" />
      <f7-list-item title="BMW" />
      <f7-list-item title="Cadillac " />
      <f7-list-item title="Chevrolet " />
      <f7-list-item title="Chrysler " />
      <f7-list-item title="Dodge " />
      <f7-list-item title="Ferrari " />
      <f7-list-item title="Ford " />
      <f7-list-item title="GMC " />
      <f7-list-item title="Honda" />
      <f7-list-item title="Hummer" />
      <f7-list-item title="Hyundai" />
      <f7-list-item title="Infiniti " />
      <f7-list-item title="Isuzu " />
      <f7-list-item title="Jaguar " />
      <f7-list-item title="Jeep " />
      <f7-list-item title="Kia" />
      <f7-list-item title="Lamborghini " />
      <f7-list-item title="Land Rover" />
      <f7-list-item title="Lexus " />
      <f7-list-item title="Lincoln " />
      <f7-list-item title="Lotus " />
      <f7-list-item title="Mazda" />
      <f7-list-item title="Mercedes-Benz" />
      <f7-list-item title="Mercury " />
      <f7-list-item title="Mitsubishi" />
      <f7-list-item title="Nissan " />
      <f7-list-item title="Oldsmobile " />
      <f7-list-item title="Peugeot " />
      <f7-list-item title="Pontiac " />
      <f7-list-item title="Porsche" />
      <f7-list-item title="Regal" />
      <f7-list-item title="Saab " />
      <f7-list-item title="Saturn " />
      <f7-list-item title="Subaru " />
      <f7-list-item title="Suzuki " />
      <f7-list-item title="Toyota" />
      <f7-list-item title="Volkswagen" />
      <f7-list-item title="Volvo" />
    </f7-list>
  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7Searchbar,
  f7List,
  f7ListItem,
  f7Link,
  f7NavRight,
  theme,
} from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7Searchbar,
    f7List,
    f7ListItem,
    f7Link,
    f7NavRight,
  },
  data() {
    return {
      theme,
    };
  },
};
</script>

Improve this Doc

On this page

Searchbar Components
Searchbar Properties
Searchbar Methods
Searchbar Events
Searchbar Slots
Searchbar v-model
Examples