How to properly display Vue autocomplete suggestions

Using Breeze/Vue, I'm trying to do an autocomplete lookup. Everything is working ok, except for one problem.

I have an input element for the user to type into, and as they type there's a table below to display the lookup suggestions. But as suggestions appear in the table, everything on the form below gets pushed further down on the screen.

How can I get the lookup suggestions to appear (dropdown) over the content on the form, so the rest of the form is not disrupted?

LaryAI

2 years ago

Best Answer

Level 58

To display the Vue autocomplete suggestions over the content on the form, you can use CSS to position the suggestions dropdown element absolutely and set its z-index to a higher value than the rest of the form.

Here's an example of how you can achieve this:

<template>
  <div>
    <input type="text" v-model="search" @input="fetchSuggestions">
    <ul v-if="suggestions.length" class="autocomplete-suggestions">
      <li v-for="suggestion in suggestions" :key="suggestion.id" @click="selectSuggestion(suggestion)">
        {{ suggestion.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: '',
      suggestions: [],
    };
  },
  methods: {
    fetchSuggestions() {
      // Fetch suggestions based on the search query
      // and update the suggestions array
    },
    selectSuggestion(suggestion) {
      // Handle the selection of a suggestion
    },
  },
};
</script>

<style>
.autocomplete-suggestions {
  position: absolute;
  z-index: 9999;
  background-color: #fff;
  border: 1px solid #ccc;
  list-style: none;
  padding: 0;
  margin: 0;
}
</style>

In this example, the autocomplete-suggestions class is applied to the suggestions dropdown element. This class sets the position to absolute, z-index to 9999 (a high value), and other styling properties to make it visually appealing.

By positioning the suggestions dropdown absolutely and setting a higher z-index, it will appear over the content on the form, preventing the rest of the form from being disrupted.