AutoComplete.vue

<script>
    Vue.component('autoComplete', {
      template:
              '<div>' +
              '<div class="input-group float-right">' +
              '<input type="text" ' +
              'id="instantSearch" ' +
              'v-model="instantSearch" ' +
              'v-on:keyup="getSearchData" ' +
              'class="form-control rounded-left border-right-0 font-italic" ' +
              'placeholder="Type in and search...">' +
              '<span class="input-group-addon bg-white border-left-0 rounded-right"><i class="fa fa-search"></i></span>' +
              '</div>' +
              '<div class="row col-12 pr-0 pl-0 ml-0">' +
              '<ul v-if="results.length" style="width: 100%;" class="list-group">' +
              '<li class="list-group-item" v-for="result in results">' +
              '@{{ result.id }} @{{ result.FirstName }} @{{ result.LastName }}' +
              '<div class="d-inline float-right m-1">' +
              '<a class="btn btn-primary btn-sm rounded" v-bind:href="`/jobs/${result.id}/create`">Select</a>'+
              '</li>' +
              '</div>' +
              '</ul>' +
              '</div>' +
              '</div>',
      data: function () {
        return {
          instantSearch: '',
          results: []
        }
      },
      methods: {
        getSearchData(){
          this.results = [];
          if(this.instantSearch.length > 0){
            axios.get('instantSearch',{params: {instantSearch: this.instantSearch}}).then(response => {
              this.results = response.data;
            });
          }
        }
      },
    });
    const app = new Vue({
      el: '#app'
    });
  </script>