I have a list box style stored in the component's data. It is bound to a listbox element. One of the styles within it is position: absolute. My goal is to position the box directly below the input element. To achieve this, I am trying to dynamically modify the listBoxStyle by fetching the top, left, and height values from the input element in the mounted hook function. However, despite my efforts, the listbox remains at its original position and doesn't move.
I am in search of a solution that allows me to move the listbox to the desired location programmatically.
Below is the code snippet:
Vue.component("employee-search", {
props: ["small"],
data: function () {
return {
searchText: "",
isSmall: (this.small ? true : false),
list: [],
formControlCss: "form-control",
fullWidthCss: "full-width",
smCss: "input-sm",
listBoxStyle: {
position: "absolute",
top: 0,
left: 0,
backgroundColor: "white",
borderStyle: "solid",
borderWidth: "1px",
padding: "5px 25px 5px 0px",
borderColor: "#245580"
}
}
},
template:
'<div>' +
' <input ref="inputBox"' +
' v-model="searchText" ' +
' v-on:input="handleInputChange"' +
' v-bind:class="[formControlCss, fullWidthCss, isSmall ? smCss : \'\']" ' +
' placeholder="Search on name or badge #..." > ' +
' <div ref="listBox" v-bind:style="listBoxStyle">' +
' <ul v-show="list.length > 0" style="margin-top: 10px"> ' +
' <li ' +
' v-for="item in list" ' +
' v-on:click="handleSelect(item)" ' +
' style="cursor: pointer; margin-bottom: 5px;">' +
' {{ item.label }}' +
' </li>' +
' </ul>' +
' </div>' +
'</div>',
methods: {
handleInputChange: function () {
console.log("handleInputChange: " + this.searchText);
var self = this;
if (this.searchText.length > 2) {
$.ajax({
url: "/api/badges?filter=" + this.searchText,
dataType: "json",
type: "GET",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
console.log(data);
self.emptyList();
data.forEach(function (item) {
self.list.push(JSON.parse(item));
});
self.positionListBox();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
} else {
this.emptyList();
}
},
handleSelect: function (item) {
console.log(item);
this.searchText = item.label;
this.emptyList();
this.$emit("selected", item);
},
emptyList: function () {
var count = this.list.length;
for (var x = 1; x <= count; x++) {
this.list.shift();
}
},
positionListBox: function () {
}
},
mounted: function () {
console.log("EmpSearch: ", this.$refs.listBox);
this.listBoxStyle.top = this.$refs.inputBox.getBoundingClientRect().top + this.$refs.inputBox.getBoundingClientRect().height;
this.listBoxStyle.left = this.$refs.inputBox.getBoundingClientRect().left;
}
});