JSFiddle - React, Tailwind, and code Playground

by ric47121

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Autocomplete with Vue 2 and Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div id="app" class="container mt-5">
        <h2>Autocomplete with Vue 2 and Bootstrap</h2>
        <input type="text" v-model="query" @input="filterList" @blur="hideSuggestions" class="form-control" placeholder="Start typing...">
        <div v-if="filteredData.length && showSuggestions" class="list-group mt-2">
            <a href="#" class="list-group-item list-group-item-action" v-for="item in filteredData" :key="item" @click.prevent="selectItem(item)">
                {{ item }}
            </a>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script src="autocomplete.js"></script>
</body>
</html>

JavaScript

new Vue({
    el: '#app',
    data() {
        return {
            query: '',
            data: ['Apple', 'Banana', 'Orange', 'Mango', 'Pineapple', 'Grape', 'Strawberry'],
            filteredData: [],
            showSuggestions: true,
        };
    },
    methods: {
        filterList() {
            const searchTerm = this.query.toLowerCase();
            this.filteredData = this.data.filter(item => item.toLowerCase().includes(searchTerm));
            this.showSuggestions = this.filteredData.length > 0;
        },
        selectItem(item) {
            this.query = item;
            this.filteredData = [];
            this.showSuggestions = false;
        },
        hideSuggestions() {
            setTimeout(() => {
                this.showSuggestions = false;
            }, 200); // Retraso para permitir la selección antes de ocultar
        },
    },
});