Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment