A simple modular Vuejs component that autosuggest input

v-autosuggest

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

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"
/>

Properties

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

Status enum table

    <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',
     }
   }...

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>

GitHub