Adirani DS | Vue Components

Search

This component acts like a typical search bar where you enter a query or keyword and then get the filtered results to be displayed as list.

A very simple example of Search component is as provided below

<template>
<Search
v-model="query"
:searchResult="result"
:resultCallBack="showAlert"
placeholder="Enter a name to search"
resultListClasses="hover:bg-purple-500 hover:text-gray-50"
class="w-3/4 mx-auto"
resultKey="name" />
</template>
<script>
import {Search} from '@adiranids/vue3-tailwind'
import {computed, ref} from 'vue'
export default {
components: {Search},
setup(){
      const query = ref("")
      const data = [{name: 'aditya'}, {name: 'john'}, {name: 'Doe'} ]
      const result = computed( () => data.value.filter(item => item.name.toLowerCase() == query.value.toLowerCase()) )
      function showAlert()
      {
      // your code to show alert or make an api call
      }
      return {
         query, showAlert, result
      }
}
  }
</script>

The above code will produce the following result

If you want to include your own search icon then just set defaulIcon prop to false and include your icon svg or component with some tailwind or css classes.

<template>
<Search
v-model="query"
:defaultIcon="false"
:searchResult="result"
:resultCallBack="showAlert"
placeholder="Enter a name to search"
resultListClasses="hover:bg-purple-500 hover:text-gray-50"
class="w-3/4 mx-auto"
resultKey="name" >

</Search>
</template>
<script>
import {Search} from '@adiranids/vue3-tailwind'
import {computed, ref} from 'vue'
export default {
components: {Search},
setup(){
      const query = ref("")
      const data = [{name: 'aditya'}, {name: 'john'}, {name: 'Doe'} ]
      const result = computed( () => data.value.filter(item => item.name.toLowerCase() == query.value.toLowerCase()) )
      function showAlert()
      {
      // your code to show alert or make an api call
      }
      return {
         query, showAlert, result
      }
}
  }
</script>

Here is the list of all the props that can be used with this component

Prop	Default Value	Description
inputClasses (type = string)	""	Takes in space separated string of tailwind or css classes. These classes will be used to style in the search input box.
searchResult (type = array, object)	{}	This will consist of the data recieved from your api or after applying the search filter. If the data is array of object then you can specify the resultKey prop to tell what key to target in the data set. Each item will be rendered as li tag.
resultKey (type = string)	""	This prop refers to the key to target in your searchResult. For example if you receive a dataset like below after you enter your query/keyword in search input [ { name: "aditya", id: 100 }, { name: "aditya", id: 200, } ] Now if you want to display name in the search result then your resultKey will be "name"
resultContainerClasses (type = string)	""	Like inputClasses props, this props takes space seperate string of tailwind or css classes and applies them on result container or the dropdown.
resultCallBack (type = function)	() => console.log(""),	Sometimes you may want a callback to run on the search result click. As each result is a list item this prop will take in a function that will run on the search result item click.
bordered (type = boolean)	true	if set to true it will put a border bottom on each search result item
placeholder (type = string)	""	placeholder for the input search box
defaultIcon (type = boolean)	true	The search icon comes with default search icon which can be avoided by setting this prop to false.

Input Table