2019-04-02 21:12:31 +11:00
|
|
|
<template>
|
2019-04-03 03:31:45 +11:00
|
|
|
<input v-model="query" placeholder="Search..." />
|
2019-04-03 04:18:36 +11:00
|
|
|
<div class="user-autosuggest" v-click-outside="onClickOutside">
|
|
|
|
<div class="user-autosuggest-results" v-if="resultsVisible">
|
2019-04-03 03:31:45 +11:00
|
|
|
<BasicUserCard v-for="user in results" :key="user.id" :user="user"/>
|
|
|
|
</div>
|
2019-04-02 21:12:31 +11:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script src="./user_autosuggest.js"></script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
2019-04-03 03:33:01 +11:00
|
|
|
.user-autosuggest {
|
2019-04-03 03:31:45 +11:00
|
|
|
position: relative;
|
2019-04-02 21:12:31 +11:00
|
|
|
|
2019-04-03 03:31:45 +11:00
|
|
|
&-results {
|
2019-04-02 21:12:31 +11:00
|
|
|
position: absolute;
|
2019-04-03 03:31:45 +11:00
|
|
|
left: 0;
|
|
|
|
top: 100%;
|
|
|
|
right: 0;
|
|
|
|
background: #FFF;
|
2019-04-02 21:12:31 +11:00
|
|
|
max-height: 400px;
|
2019-04-03 03:31:45 +11:00
|
|
|
overflow-y: auto;
|
|
|
|
z-index: 1;
|
2019-04-02 21:12:31 +11:00
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|