soraino / v-autosuggest

A simple modular Vuejs component that autosuggest input from a dyanamic or static data querying.

⚠️ This component is no longer being maintained! Do look for other alternatives if you're still using Vue 1.x and 2.x

v-autosuggest

A simple modular Vuejs component that autosuggest input from a dyanamic or static data querying.

Table of contents

• Installation
• Usage
• Properties
• Example

---

Installation

npm install --save v-autosuggest

---

Usage

import VAutoSuggest from 'v-autosuggest'

Vue.component('v-autosuggest', VAutosuggest )

In your template you can use this syntax:

<VAutosuggest 
    v-model="searchData" 
    :getItemFromAjax="ajaxCall" 
    :suggValue="'name'" 
    :suggStatusComp="statusComponent"
    :suggItemComp="suggItemComponent"
    :items="staticSuggArray"
    :maxSuggestion="maxSugg"
  :inputClass="'form-control'"
/>

---

Properties

Property Name	type	Required	Default Value	Description
getItemFromAjax	Function	false	null	contains function that queries and returns the data ( if property "items" is present, this property function will not be fired )
suggValue	String	false	"value" or "item.value" for nested value	the property name that is the main thing that is being queried
suggStatusComp	Object (vue component)	false	base status component	Vue component that show the status of the querying
suggItemComp	Object (vue component)	false	base item component	Vue component that show the suggestion items
items	Array	false	null	Contains a static array of items that is gonna be queried (if this property is present, the getItemFromAjax function will not be fired)
maxSuggestion	Number	false	5	Max number of suggestion item is being shown on screen
inputClass	String	false	v-autocomplete-input	Defines the class for the input tag which you can override with your own class like bootstrap's form-control

---

Example

There's 2 ways of inserting the data for v-autosuggest

Basic Usage

1. Through online querying (ie: ajax, firebase , etc...)
2. Static JSON file or equivalent

Basic usage with Online querying (not limited to ajax)

<template>
    <VAutosuggest v-model="searchData" :getItemFromAjax="ajaxCall"/>
</template>
<script>
import axios from 'axios'
import VAutosuggest from 'v-autosuggest'

export default {
  name: 'app',
  components: {
    VAutosuggest
  },
  data () {
    return {
      searchData: ''
    }
  },
  methods: {
    ajaxCall: async function (query) {
      const response = await axios.get(`https://swapi.co/api/people/?search=${query}`)
      return response.data.results.reduce((Accumulative, current) => {
    Accumulative.push({value: current.name, description: 'Height: '+ current.height + 'cm'})
    return Accumulative
  })
    }
  }
}
</script>

Important Note:

• ajaxCall: Return either a promise or await the function and return the value
• I use reduce in the ajaxCall to only get the the name and height of each of the data, but for the height i put description, this is because the default suggestion component shows description in the description property.

---

Basic usage with static data (eg: JSON file, array, xml)

<template>
	    <VAutosuggest v-model="searchData" :suggValue="'name'"/>
    </template>
<script>
import axios from 'axios'
import VAutosuggest from 'v-autosuggest'

export default {
  name: 'app',
  components: {
    VAutosuggest
  },
  data () {
    return {
      searchData: '',
      arrayData: [{name:'Ben', description:'180cm'},{name:'Jon', description:'179cm'},{name:'Smith', description:'190cm'}]
    }
  }
}
</script>

Advanced Usage

You are able to change the component for the status and suggestion to suit your own website.

This is the status component

These are the suggestion items component

You will be able to change the status and suggestion item component by passing your own into the suggStatusComp and suggItemComp respectively.

But there are some caveats.

Suggestion Status Component

When trying to make this component, be sure to include this prop and data

  ...props: {
    suggestionStatusEnum: {
      required: true,
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      suggestionStatus: {
        nuetralStatus: 0,
        noDataFound: 1,
        loading: 2,
        closeStatus: 3
      }
    }
  }...

As you can see the suggestionStatus act as a enum to check the current status of the suggestion querying

Property Name	Description
suggestionStatusEnum	represents the current status of the suggestion querying
valueProp	Represents the key value data that you are trying to find/suggest

---

Status enum table

Status Name	Status Number	Status Description
nuetralStatus	0	Shown as a neutral stands as no suggestion is being shown but will still be able to shown as empty li tag to the user
noDataFound	1	This is to show an error message to the user that data can be found on their query
loading	2	Shows a loading spinner to tell user it is querying the data
closeStatus	3	Hides the li tag completely even if query finds the data

Example Suggestion Item component

    <template>
  <div v-show="suggestionStatusEnum != suggestionStatus.nuetralStatus || suggestionStatusEnum != suggestionStatus.closeStatus">
    <div class="loader" v-show="suggestionStatusEnum == suggestionStatus.loading">
    </div>
    <div v-show="suggestionStatusEnum == suggestionStatus.noDataFound">
      <h2>No result found</h2>
    </div>
  </div>
</template>

<style>
.loader {
  border: 2px solid #f3f3f3;
  border-radius: 100%;
  border-top: 2px solid black;
  width: 20px;
  height: 20px;
  -webkit-animation: spin 0.5s linear infinite;
  animation: spin 0.5s linear infinite;
  margin: 0 auto;
}
/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

<script>
export default {
  name: 'suggestionStatus',
  props: {
    suggestionStatusEnum: {
      required: true,
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      suggestionStatus: {
        nuetralStatus: 0,
        noDataFound: 1,
        loading: 2,
        closeStatus: 3
      }
    }
  }
}
</script>

Suggestion Status Component

When trying to make this component, be sure to include these 2 props

...props: {
     item: {
       type: Object,
       required: true
     },
     valueProp:{
       type: String,
       required: false,
       default: 'value',
     }
   }...

property Name	Description
item	Object that represents a suggestion item
valueProp	Represents the key value data that you are trying to find/suggest

Example Suggestion Item component

<template>
  <div>
      <h2 v-text="item[this.valueProp]"></h2>
      <p v-text=" item.subDescription"></p>
      <p v-text=" item.createAt"></p>
  </div>
</template>
<script>
export default {
  name: 'suggItemComponent',
  props: {
    item: {
      type: Object,
      required: true
    },
    valueProp:{
      type: String,
      required: false,
      default: 'value',
    }
  }
}
</script>

---

License

MIT