🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool!

Searchbar Svelte Component

Searchbar Svelte component represents Framework7's Searchbar component.

Searchbar Components

There are following components included:

Searchbar Properties

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

PropTypeDefaultDescription
<Searchbar> properties
initbooleantrueInitializes Searchbar
valuestring
number
Allows to specify Searchbar input's value. Can be useful when used with customSearch enabled
formbooleantrueMain searchbar element will be used as a form tag instead of div
placeholderstring"Search"Input placeholder text
disableButtonbooleantrueEnables disable button
disableButtonTextstringCancelDisable button text
clearButtonbooleantrueEnables searchbar input clear button
expandablebooleanfalseEnables expandable searchbar
inlinebooleanfalseEnables inline searchbar
spellcheckbooleanSets spellcheck attribute on input element
searchContainerstring
object
CSS selector or HTML element of list block to search
searchInstring.item-titleCSS 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'
searchItemstringliCSS selector of single search item. If we do a search in List View, then it must be a single list element li
searchGroupstring.list-groupCSS selector of group element. Used when hideGroups enabled to hide groups. If we do a search in List View, then it usually a list group.
searchGroupTitlestring.list-group-titleCSS selector of group titles. Used when hideGroupTitles enabled to hide group titles. If we do a search in List View, then it usually a list group title.
foundElstring
object
.searchbar-foundCSS selector or HTMLElement of searchbar "found" element. If not specified, searchbar will look for .searchbar-found element on page
notFoundElstring
object
.searchbar-not-foundCSS selector or HTMLElement of searchbar "not-found" element. If not specified, searchbar will look for .searchbar-not-found element on page
backdropbooleanEnables searchbar backdrop element. By default, disabled for inline searchbar
backdropElstring
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
ignorestring.searchbar-ignoreCSS selector for items to be ignored by searchbar and always present in search results
customSearchbooleanfalseWhen 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
removeDiacriticsbooleanfalseEnable to remove/replace diacritics (á, í, ó, etc.) during search
hideGroupTitlesbooleantrueIf enabled, then search will consider group titles and hide them if there are no found items right after them
hideGroupsbooleantrueIf enabled, then search will consider list view groups hide them if there are no found items inside of these groups
outlinebooleantrueAdds searchbar bottom thin border (hairline) for iOS theme

Searchbar Methods

<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

EventArgumentsDescription
<Searchbar> events
searchbarSearch(searchbar, query, previousQuery)Event will be triggered during search (search field change). As an arguments event receives searchbar instance, search query and previous query
searchbarClear(searchbar, previousQuery)Event will be triggered when user clicks on Searchbar input "clear" button. As an arguments event receives searchbar instance and previous query
searchbarEnable(searchbar)Event will be triggered when Searchbar becomes active
searchbarDisable(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
clickClear(event)Event will be triggered when user clicks on input "clear" button
clickDisable(event)Event will be triggered when user clicks on searchbar disable button

Searchbar Slots

Searchbar Svelte component has additional slots for custom elements:

Without Slots:

<Searchbar
  disableButtonText="Cancel"
  placeholder="Search in items"
  clearButton={true}
/>

<!-- 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:

<Searchbar
  disableButtonText="Cancel"
  placeholder="Search in items"
  clearButton={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>
</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 calling .instance() component's method. For example:

<Searchbar bind:this={component}>...</Searchbar>

<script>
  let component;

  // to get instance in some method
  component.instance()
</script>

Examples

Usual Searchbar

searchbar.svelte
<script>
  import { Navbar, Page, Searchbar, Subnavbar, List, ListItem } from 'framework7-svelte';
</script>

<Page>
  <Navbar title="Searchbar">
    <Subnavbar inner={false}>
      <Searchbar searchContainer=".search-list" searchIn=".item-title" />
    </Subnavbar>
  </Navbar>
  <List strongIos outlineIos dividersIos class="searchbar-not-found">
    <ListItem title="Nothing found" />
  </List>
  <List strongIos outlineIos dividersIos class="search-list searchbar-found">
    <ListItem title="Acura" />
    <ListItem title="Audi" />
    <ListItem title="BMW" />
    <ListItem title="Cadillac " />
    <ListItem title="Chevrolet " />
    <ListItem title="Chrysler " />
    <ListItem title="Dodge " />
    <ListItem title="Ferrari " />
    <ListItem title="Ford " />
    <ListItem title="GMC " />
    <ListItem title="Honda" />
    <ListItem title="Hummer" />
    <ListItem title="Hyundai" />
    <ListItem title="Infiniti " />
    <ListItem title="Isuzu " />
    <ListItem title="Jaguar " />
    <ListItem title="Jeep " />
    <ListItem title="Kia" />
    <ListItem title="Lamborghini " />
    <ListItem title="Land Rover" />
    <ListItem title="Lexus " />
    <ListItem title="Lincoln " />
    <ListItem title="Lotus " />
    <ListItem title="Mazda" />
    <ListItem title="Mercedes-Benz" />
    <ListItem title="Mercury " />
    <ListItem title="Mitsubishi" />
    <ListItem title="Nissan " />
    <ListItem title="Oldsmobile " />
    <ListItem title="Peugeot " />
    <ListItem title="Pontiac " />
    <ListItem title="Porsche" />
    <ListItem title="Regal" />
    <ListItem title="Saab " />
    <ListItem title="Saturn " />
    <ListItem title="Subaru " />
    <ListItem title="Suzuki " />
    <ListItem title="Toyota" />
    <ListItem title="Volkswagen" />
    <ListItem title="Volvo" />
  </List>
</Page>

Expandable Searchbar

searchbar-expandable.svelte
<script>
  import { Navbar, Page, Searchbar, List, ListItem, Link, NavRight } from 'framework7-svelte';
</script>

<Page>
  <Navbar title="Searchbar">
    <NavRight>
      <Link searchbarEnable=".searchbar-demo" iconIos="f7:search" iconMd="material:search" />
    </NavRight>
    <Searchbar
      class="searchbar-demo"
      expandable
      searchContainer=".search-list"
      searchIn=".item-title"
    />
  </Navbar>
  <List strongIos outlineIos dividersIos class="searchbar-not-found">
    <ListItem title="Nothing found" />
  </List>
  <List strongIos outlineIos dividersIos class="search-list searchbar-found">
    <ListItem title="Acura" />
    <ListItem title="Audi" />
    <ListItem title="BMW" />
    <ListItem title="Cadillac " />
    <ListItem title="Chevrolet " />
    <ListItem title="Chrysler " />
    <ListItem title="Dodge " />
    <ListItem title="Ferrari " />
    <ListItem title="Ford " />
    <ListItem title="GMC " />
    <ListItem title="Honda" />
    <ListItem title="Hummer" />
    <ListItem title="Hyundai" />
    <ListItem title="Infiniti " />
    <ListItem title="Isuzu " />
    <ListItem title="Jaguar " />
    <ListItem title="Jeep " />
    <ListItem title="Kia" />
    <ListItem title="Lamborghini " />
    <ListItem title="Land Rover" />
    <ListItem title="Lexus " />
    <ListItem title="Lincoln " />
    <ListItem title="Lotus " />
    <ListItem title="Mazda" />
    <ListItem title="Mercedes-Benz" />
    <ListItem title="Mercury " />
    <ListItem title="Mitsubishi" />
    <ListItem title="Nissan " />
    <ListItem title="Oldsmobile " />
    <ListItem title="Peugeot " />
    <ListItem title="Pontiac " />
    <ListItem title="Porsche" />
    <ListItem title="Regal" />
    <ListItem title="Saab " />
    <ListItem title="Saturn " />
    <ListItem title="Subaru " />
    <ListItem title="Suzuki " />
    <ListItem title="Toyota" />
    <ListItem title="Volkswagen" />
    <ListItem title="Volvo" />
  </List>
</Page>