mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/izyim.git
synced 2026-08-28 17:03:57 +00:00
Omair Saleh
78 lines
3.2 KiB
Vue
78 lines
3.2 KiB
Vue
<template>
|
|
<div class="row align-items-center justify-content-center p-b-20">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col p-r-0">
|
|
<div class="row">
|
|
<div class="col p-r-0">
|
|
<input type="text" class="form-control no-border" v-model="query" @keyup="search()" :placeholder="placeholder" id="icon-filter" name="icon-filter" autocomplete="off">
|
|
</div>
|
|
<div class="col-auto bg-white pointer" @click="closeSearch()">
|
|
<i class="fa fa-times fs-10 muted lh-35"></i>
|
|
</div>
|
|
</div>
|
|
<div class="row no-margin" :class="{'hide': !isActive}">
|
|
<div class="col b-t b-grey no-padding absolute w-100 bg-white" style="z-index: 999; box-shadow: 0px 1px 8px -4px rgba(0,0,0,0.75);">
|
|
<div class="row no-margin b-b b-grey" v-for="result in results" v-bind:key="result.id">
|
|
<div class="col">
|
|
<a :href="route('companies.profile', {companyId: result.id})">
|
|
<div class="row bold align-items-center p-t-10 p-b-10 ">
|
|
<div class="col-3 p-r-10">
|
|
<div class="block p-l-10 p-r-10 p-t-5 p-b-5 bg-master text-white fs-9 b-rad-none text-center">
|
|
{{result.marking}}
|
|
</div>
|
|
</div>
|
|
<div class="col p-l-0 fs-10">{{result.name}}</div>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<!--<div class="text-success fs-12 bold">Advanced Search</div>-->
|
|
</div>
|
|
<div class="col-1"></div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
'placeholder': {
|
|
type: String,
|
|
default: "Search user or group"
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
query: "",
|
|
results: [],
|
|
isActive: false
|
|
}
|
|
},
|
|
methods: {
|
|
route: route,
|
|
search(){
|
|
if(this.query.length > 2 ){
|
|
fetch(route('api.company.search') + '?query=' + this.query).then(response => response.json())
|
|
.then(response => {
|
|
this.results = response.data;
|
|
this.isActive = true;
|
|
})
|
|
.catch(error => console.log(error))
|
|
|
|
} else {
|
|
this.isActive = false;
|
|
}
|
|
},
|
|
closeSearch(){
|
|
this.query = '';
|
|
this.isActive = false;
|
|
},
|
|
}
|
|
}
|
|
</script> |