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 usefule 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
    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, .item-divider CSS selector of group titles and dividers. Used when hide-dividers enabled to hide group titles and dividers. If we do a search in List View, then it usually a list group title or list item divider.
    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 true Enables searchbar backdrop element
    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-dividers 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
    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
    no-shadow boolean false Disable shadow rendering for MD theme
    no-hairline boolean false Disable 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-link-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-link-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>
    

    Access To Searchbar Instance

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

    Examples

    Usual Searchbar

    <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 class="searchbar-not-found">
        <f7-list-item title="Nothing found"></f7-list-item>
      </f7-list>
      <f7-list class="search-list searchbar-found">
        <f7-list-item title="Acura"></f7-list-item>
        <f7-list-item title="Audi"></f7-list-item>
        <f7-list-item title="BMW"></f7-list-item>
        <f7-list-item title="Cadillac "></f7-list-item>
        <f7-list-item title="Chevrolet "></f7-list-item>
        <f7-list-item title="Chrysler "></f7-list-item>
        <f7-list-item title="Dodge "></f7-list-item>
        <f7-list-item title="Ferrari "></f7-list-item>
        <f7-list-item title="Ford "></f7-list-item>
        <f7-list-item title="GMC "></f7-list-item>
        <f7-list-item title="Honda"></f7-list-item>
        <f7-list-item title="Hummer"></f7-list-item>
        <f7-list-item title="Hyundai"></f7-list-item>
        <f7-list-item title="Infiniti "></f7-list-item>
        <f7-list-item title="Isuzu "></f7-list-item>
        <f7-list-item title="Jaguar "></f7-list-item>
        <f7-list-item title="Jeep "></f7-list-item>
        <f7-list-item title="Kia"></f7-list-item>
        <f7-list-item title="Lamborghini "></f7-list-item>
        <f7-list-item title="Land Rover"></f7-list-item>
        <f7-list-item title="Lexus "></f7-list-item>
        <f7-list-item title="Lincoln "></f7-list-item>
        <f7-list-item title="Lotus "></f7-list-item>
        <f7-list-item title="Mazda"></f7-list-item>
        <f7-list-item title="Mercedes-Benz"></f7-list-item>
        <f7-list-item title="Mercury "></f7-list-item>
        <f7-list-item title="Mitsubishi"></f7-list-item>
        <f7-list-item title="Nissan "></f7-list-item>
        <f7-list-item title="Oldsmobile "></f7-list-item>
        <f7-list-item title="Peugeot "></f7-list-item>
        <f7-list-item title="Pontiac "></f7-list-item>
        <f7-list-item title="Porsche"></f7-list-item>
        <f7-list-item title="Regal"></f7-list-item>
        <f7-list-item title="Saab "></f7-list-item>
        <f7-list-item title="Saturn "></f7-list-item>
        <f7-list-item title="Subaru "></f7-list-item>
        <f7-list-item title="Suzuki "></f7-list-item>
        <f7-list-item title="Toyota"></f7-list-item>
        <f7-list-item title="Volkswagen"></f7-list-item>
        <f7-list-item title="Volvo"></f7-list-item>
      </f7-list>
    </f7-page>
    

    Expandable Searchbar

    <f7-page>
      <f7-navbar title="Searchbar">
        <f7-nav-right>
          <f7-link class="searchbar-enable" data-searchbar=".searchbar-demo" icon-ios="f7:search_strong" icon-md="material:search"></f7-link>
        </f7-nav-right>
        <f7-searchbar
          class="searchbar-demo"
          expandable
          search-container=".search-list"
          search-in=".item-title"
        ></f7-searchbar>
      </f7-navbar>
      <f7-list class="searchbar-not-found">
        <f7-list-item title="Nothing found"></f7-list-item>
      </f7-list>
      <f7-list class="search-list searchbar-found">
        <f7-list-item title="Acura"></f7-list-item>
        <f7-list-item title="Audi"></f7-list-item>
        <f7-list-item title="BMW"></f7-list-item>
        <f7-list-item title="Cadillac "></f7-list-item>
        <f7-list-item title="Chevrolet "></f7-list-item>
        <f7-list-item title="Chrysler "></f7-list-item>
        <f7-list-item title="Dodge "></f7-list-item>
        <f7-list-item title="Ferrari "></f7-list-item>
        <f7-list-item title="Ford "></f7-list-item>
        <f7-list-item title="GMC "></f7-list-item>
        <f7-list-item title="Honda"></f7-list-item>
        <f7-list-item title="Hummer"></f7-list-item>
        <f7-list-item title="Hyundai"></f7-list-item>
        <f7-list-item title="Infiniti "></f7-list-item>
        <f7-list-item title="Isuzu "></f7-list-item>
        <f7-list-item title="Jaguar "></f7-list-item>
        <f7-list-item title="Jeep "></f7-list-item>
        <f7-list-item title="Kia"></f7-list-item>
        <f7-list-item title="Lamborghini "></f7-list-item>
        <f7-list-item title="Land Rover"></f7-list-item>
        <f7-list-item title="Lexus "></f7-list-item>
        <f7-list-item title="Lincoln "></f7-list-item>
        <f7-list-item title="Lotus "></f7-list-item>
        <f7-list-item title="Mazda"></f7-list-item>
        <f7-list-item title="Mercedes-Benz"></f7-list-item>
        <f7-list-item title="Mercury "></f7-list-item>
        <f7-list-item title="Mitsubishi"></f7-list-item>
        <f7-list-item title="Nissan "></f7-list-item>
        <f7-list-item title="Oldsmobile "></f7-list-item>
        <f7-list-item title="Peugeot "></f7-list-item>
        <f7-list-item title="Pontiac "></f7-list-item>
        <f7-list-item title="Porsche"></f7-list-item>
        <f7-list-item title="Regal"></f7-list-item>
        <f7-list-item title="Saab "></f7-list-item>
        <f7-list-item title="Saturn "></f7-list-item>
        <f7-list-item title="Subaru "></f7-list-item>
        <f7-list-item title="Suzuki "></f7-list-item>
        <f7-list-item title="Toyota"></f7-list-item>
        <f7-list-item title="Volkswagen"></f7-list-item>
        <f7-list-item title="Volvo"></f7-list-item>
      </f7-list>
    </f7-page>