<style>

#app {

  font-family: Roboto, Helvetica, Arial, sans-serif;

}

</style>

<script>

  import { MDBAutocomplete } from "mdb-vue-ui-kit";

  import { ref, onMounted } from "vue";

​

  export default {

    components: {

      MDBAutocomplete

    },

    setup() {

      const autocompleteBasic = ref("");

      const optionsBasic = ref([]);

      const filterBasic = value => {

        return optionsBasic.value.filter(item => {

          return item.toLowerCase().startsWith(value.toLowerCase());

        });

      };

      const autocomplete = ref(null)

      onMounted(()=>{

        optionsBasic.value = [

        "One",

        "Two",

        "Three",

        "Four",

        "Five",

        "Six",

        "Seven",

        "Eight"

      ]

        window.addEventListener("keydown", (e) => {

          if (e.key === "Enter") {

            autocomplete.value.close()

            document.getElementById("clearFocus").blur()

          };

        })

      })

​

      return {

        autocompleteBasic,

        filterBasic,

        autocomplete

      };

    }

  };

</script>