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" >
<!-- Your icon component or svg will come here -->
  </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.


Copyright © 2021 Adirani Digital Solutions Ltd