munch-ease-frontend/src/components/recipes/RecipeSearchBox.vue

<template>
    <div class="recipe-search-box" @focusout="recipes = []">
        <input type="text" v-model="searchTerm" @keyup.enter="search" @keyup.exit="clear" @focusin="search"
            :placeholder="placeholder" />
        <ul v-if="recipes?.length" class="dropdown">
            <li class="recipe" v-for="recipe in recipes" :key="recipe.id" @mousedown="selectRecipe(recipe)">
                <recipe-card :recipe="recipe" />
            </li>
        </ul>
    </div>
</template>

<script>
import { searchRecipes } from '@/api/recipes'
import RecipeCard from './RecipeCard.vue';

export default {
    name: 'RecipeSearchBox',
    components: { RecipeCard },
    props: {
        placeholder: { type: String, default: 'Add a recipe...' }
    },
    data() {
        return {
            searchTerm: '',
            recipes: [],
            timeouts: [],
        }
    },
    watch: {
        searchTerm() {
            const searchTerm = this.searchTerm;
            if (searchTerm) {
                this.timeouts.push(setTimeout(() => {
                    if (searchTerm === this.searchTerm) {
                        this.search();
                    }
                }, 200));
            }
        }
    },
    methods: {
        async search() {
            this.recipes = await searchRecipes(this.searchTerm) ?? this.recipes;
        },
        selectRecipe(recipe) {
            this.$emit('select-recipe', recipe);
            this.searchTerm = '';
            this.recipes = [];
        }
    }
}
</script>

<style scoped>
.recipe-search-box {
    position: relative;
}

.recipe-search-box input {
    width: calc(100% - 2em);
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    outline: none;
}

.recipe-search-box .dropdown {
    position: absolute;
    top: 100%;
    width: 100%;
    margin: auto;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    
    list-style-type: none;
    margin: 0;
    padding: 0;
    max-height: 40vh;
    overflow-y: scroll;
}

.recipe-search-box .dropdown li {
    padding: 8px;
    cursor: pointer;
    border-bottom: 1px solid #ccc;
}

.recipe-search-box .dropdown li:last-child {
    border-bottom: none;
}

.recipe-search-box .dropdown li:hover {
    background-color: #eee;
}
</style>