Searchbar Vue Component

Searchbar Components
Searchbar Props
Searchbar Events
Examples

Searchbar allows user to search through List View elements. Or it can be used as a visual UI component for your custom search realization.

Searchbar Components

There are following components included:

Searchbar

Searchbar Props

Name	Type	Default	Description
clearButton	boolean	true	Adds input clear button
colors	object		Object with Tailwind CSS colors classes
colors.inputBgIos	string	''
colors.inputBgMaterial	string	'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'
colors.placeholderIos	string	''
colors.placeholderMaterial	string	'placeholder-md-light-on-surface-variant dark:placeholder-md-dark-on-surface-variant'
component	string	'div'	Component's HTML Element
disableButton	boolean	false	Adds button for cancel search and set its initial state
disableButtonText	string	'Cancel'	Disable button text
inputId	string		Input id attribute
inputStyle	CSSProperties		Additional input classes
placeholder	string \| number	'Search'	Searchbar placeholder
value	any		Searchbar value

Searchbar Events

Name	Type	Description
blur	function(e)	`blur` event handler
change	function(e)	`change` event handler
clear	function(e)	Fired on clear button click
disable	function(e)	Fired on searchbar disable
focus	function(e)	`focus` event handler
input	function(e)	`input` event handler

Examples

Searchbar.vue

<template>
  <k-page>
    <k-navbar title="Searchbar">
      
      <template #subnavbar>
        <k-searchbar
          :value="searchQuery"
          disable-button
          disable-button-text="Cancel"
          @clear="handleClear"
          @disable="handleDisable"
          @input="handleSearch"
        >
        </k-searchbar>
      </template>
    </k-navbar>
    <k-list strong inset-material outline-ios>
      <k-list-item v-if="filteredItems.length === 0" title="Nothing found" />
      <k-list-item
        v-for="item in filteredItems"
        :key="item.title"
        :title="item.title"
      />
    </k-list>
  </k-page>
</template>
<script>
  import { ref, watch } from 'vue';
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kSearchbar,
    kList,
    kListItem,
  } from 'konsta/vue';

  const items = [
    { title: 'FC Ajax' },
    { title: 'FC Arsenal' },
    { title: 'FC Athletic' },
    { title: 'FC Barcelona' },
    { title: 'FC Bayern München' },
    { title: 'FC Bordeaux' },
    { title: 'FC Borussia Dortmund' },
    { title: 'FC Chelsea' },
    { title: 'FC Galatasaray' },
    { title: 'FC Juventus' },
    { title: 'FC Liverpool' },
    { title: 'FC Manchester City' },
    { title: 'FC Manchester United' },
    { title: 'FC Paris Saint-Germain' },
    { title: 'FC Real Madrid' },
    { title: 'FC Tottenham Hotspur' },
    { title: 'FC Valencia' },
    { title: 'FC West Ham United' },
  ];

  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kSearchbar,
      kList,
      kListItem,
    },
    setup() {
      const searchQuery = ref('');

      const handleSearch = (e) => {
        searchQuery.value = e.target.value;
      };

      const handleClear = () => {
        searchQuery.value = '';
      };

      const handleDisable = () => {
        console.log('Disable');
      };

      const filteredItems = ref(items);

      watch(searchQuery, () => {
        filteredItems.value = searchQuery.value
          ? items.filter((item) =>
              item.title.toLowerCase().includes(searchQuery.value.toLowerCase())
            )
          : items;
      });
      return {
        searchQuery,
        filteredItems,
        handleSearch,
        handleClear,
        handleDisable,
      };
    },
  };
</script>