Vuejs auto suggest input box leading to extra space in the html - vue.js

Question

Auto suggest uses extra spaces in the html, because of the reason the next elements like H1, H2 and paragraph are going down when I start typing in the suggestion box
App.vue
<template>
<div id="app">
<Autocomplete
:items="[
'Apple',
'Banana',
'Orange',
'Mango',
'Pear',
'Peach',
'Grape',
'Tangerine',
'Pineapple',
]"
/>
<p>p1</p>
<h1>h1</h1>
<h1>h2</h1>
</div>
</template>
<script>
import Autocomplete from "./components/AutoComplete";
import AutoCompleteSearch from "./directives/auto-complete-search.js";
import axios from "axios";
export default {
name: "App",
directives: {
AutoCompleteSearch,
},
components: {
Autocomplete,
},
data() {
return {
data: [],
};
},
methods: {
async getUser() {
await axios
.get("https://jsonplaceholder.typicode.com/users")
.then((res) => (this.data = res.data))
.catch((err) => console.log(err));
},
},
mounted() {
this.data = [{ name: "Elie" }, { name: "John" }];
},
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
AutocompletSearch.js -- directive
import Vue from "vue";
/**
* Add the list attribute to the bound input field.
*
* #param element
* #param binding
* #returns {HTMLElement}
*/
const addAttribute = (element, binding) => {
const { id } = binding.value;
element.setAttribute("list", id);
return element;
};
/**
* The search data for auto-completions
*
* #param binding
* #returns {Object|Array}
*/
const searchData = (binding) => {
const { data } = binding.value;
return data;
};
/**
* Construct the datalist HTMLElement
*
* #param element
* #param binding
* #returns {HTMLDataListElement}
*/
const constructDataList = (element, binding) => {
const datalist = document.createElement("datalist");
datalist.id = binding.value.id;
const data = searchData(binding);
data.forEach((item) => {
const { autoCompleteValue } = binding.value;
const option = document.createElement("option");
option.value = item[autoCompleteValue];
datalist.appendChild(option);
});
return datalist;
};
/**
* #param el the element where to bind the directive
* #param binding {id & autoCompleteValue & data}
*/
const init = (el, binding) => {
const element = addAttribute(el, binding);
const wrapper = element.parentNode;
const datalist = constructDataList(element, binding);
wrapper.appendChild(datalist);
};
export default Vue.directive("auto-complete-search", {
update(el, binding, vnode) {
const vm = vnode.context;
const bindingData = binding.value;
const componentName = vm.$options.name;
const customCallbackName = bindingData.callbackName;
console.log("component updated");
// call the function to fetch auto complete dat
vm.$options.methods.getUser();
if (!vm.$options.methods.getUser && customCallbackName === undefined)
return console.error(`the getUser() is neither defined or overriden in ${componentName} component, on
the auto-complete-search directive`);
if (binding.value.apply) {
init(el, binding);
}
if (!binding.value.apply) {
el.removeAttribute("list");
}
}
});
AutoComplete.vue
<template>
<div class="autocomplete">
<input
type="text"
#input="onChange"
v-model="search"
#keydown.down="onArrowDown"
#keydown.up="onArrowUp"
#keydown.enter="onEnter"
/>
<ul id="autocomplete-results" v-show="isOpen" class="autocomplete-results">
<li class="loading" v-if="isLoading">Loading results...</li>
<li
v-else
v-for="(result, i) in results"
:key="i"
#click="setResult(result)"
class="autocomplete-result"
:class="{ 'is-active': i === arrowCounter }"
>
{{ result }}
</li>
</ul>
</div>
</template>
<script>
export default {
name: "AutoComplete",
props: {
items: {
type: Array,
required: false,
default: () => [],
},
isAsync: {
type: Boolean,
required: false,
default: false,
},
},
data() {
return {
isOpen: false,
results: [],
search: "",
isLoading: false,
arrowCounter: -1,
};
},
watch: {
items: function (value, oldValue) {
if (value.length !== oldValue.length) {
this.results = value;
this.isLoading = false;
}
},
},
mounted() {
document.addEventListener("click", this.handleClickOutside);
},
destroyed() {
document.removeEventListener("click", this.handleClickOutside);
},
methods: {
setResult(result) {
this.search = result;
this.isOpen = false;
},
filterResults() {
this.results = this.items.filter((item) => {
return item.toLowerCase().indexOf(this.search.toLowerCase()) > -1;
});
},
onChange() {
this.$emit("input", this.search);
if (this.isAsync) {
this.isLoading = true;
} else {
this.filterResults();
this.isOpen = true;
}
},
handleClickOutside(event) {
if (!this.$el.contains(event.target)) {
this.isOpen = false;
this.arrowCounter = -1;
}
},
onArrowDown() {
if (this.arrowCounter < this.results.length) {
this.arrowCounter = this.arrowCounter + 1;
}
},
onArrowUp() {
if (this.arrowCounter > 0) {
this.arrowCounter = this.arrowCounter - 1;
}
},
onEnter() {
this.search = this.results[this.arrowCounter];
this.isOpen = false;
this.arrowCounter = -1;
},
},
};
</script>
<style>
.autocomplete {
position: relative;
}
.autocomplete-results {
padding: 0;
margin: 0;
border: 1px solid #eeeeee;
height: 120px;
overflow: auto;
}
.autocomplete-result {
list-style: none;
text-align: left;
padding: 4px 2px;
cursor: pointer;
}
.autocomplete-result.is-active,
.autocomplete-result:hover {
background-color: #4AAE9B;
color: white;
}
</style>
Please help me out this, auto suggestion can show like popup-modal instead of using extra spaces in the html. like
Here is my code link - https://codesandbox.io/s/vuejs-autocomplete-input-forked-fh31tr

Answer 1

After checking out your codesandbox just add these 3 css properties to your autocomplete class:
position: absolute;
width: 100%;
background: white;