<style>

#app {

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

}

</style>

<script>

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

  import { ref } from "vue";

​

  export default {

    components: {

      MDBAutocomplete, MDBBtn

    },

    setup() {

      const autocompleteBasic = ref("");

      const optionsBasic = ref([

        "One",

        "Two",

        "Three",

        "Four",

        "Five",

        "Six",

        "Seven",

        "Eight"

      ]);

      const filterBasic = value => {

        return optionsBasic.value.filter(item => {

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

        });

      };

      const autocompleteRef = ref(null)

      const handleClose = () => {

        autocompleteRef.value.close()

      }

​

      return {

        autocompleteBasic,

        filterBasic,

        handleClose,

        autocompleteRef

      };

    }

  };

</script>