Skip to main content
The search feature allows users to quickly find Pokemon by name with instant, real-time filtering.

​
Overview

The search system provides:
  • Real-time filtering as you type
  • Case-insensitive search
  • Searches across all 1000+ Pokemon
  • Instant results with no delay
  • Clean, focused search interface

​
Search Input Component

The search input is prominently displayed at the top of the Pokedex: 
<div class="search-container">
    <input 
        type="text" 
        v-model="searchQuery" 
        placeholder="Buscar Pokémon..."
        class="search-input"
    >
</div>

​
Search Implementation

The search functionality uses Vue’s reactive system for instant filtering: 
import { ref, computed } from 'vue';

const searchQuery = ref('');
const allPokemons = ref([]);

// Fetch all Pokemon names for searching
const fetchAllPokemons = async () => {
    try {
        const response = await fetch('https://pokeapi.co/api/v2/pokemon?limit=1000');
        const data = await response.json();
        allPokemons.value = data.results;
    } catch (err) {
        console.error('Error fetching all pokemons:', err);
    }
};

​
Filtering Logic

The filtered results are computed reactively using Vue’s computed property: 
const filteredPokemons = computed(() => {
    if (!datos.value?.results) return [];
    
    if (searchQuery.value.trim() === '') {
        return datos.value.results;
    }
    
    const query = searchQuery.value.toLowerCase();
    return allPokemons.value.filter(pokemon => 
        pokemon.name.toLowerCase().includes(query)
    );
});
When the search query is empty, the component displays the paginated results. When searching, it displays all matching Pokemon from the complete dataset.

​
How It Works

1

Initial Load

On component mount, the app fetches all 1000+ Pokemon names for search indexing while displaying the first paginated page.
2

User Types

As the user types, the searchQuery ref updates automatically thanks to v-model.
3

Instant Filter

The filteredPokemons computed property recalculates immediately, filtering the complete Pokemon list.
4

Display Results

The template renders the filtered results in the same grid layout used for browsing.

​
Search Input Styling

The search input features a clean, focused design with smooth transitions: 
.search-input {
    width: 100%;
    max-width: 400px;
    padding: 12px 20px;
    font-size: 1rem;
    background-color: #2d3748;
    color: #e2e8f0;
    border: 2px solid #4a5568;
    border-radius: 25px;
    outline: none;
    transition: all 0.3s ease;
}

.search-input:focus {
    border-color: #63b3ed;
    box-shadow: 0 0 0 3px rgba(99, 179, 237, 0.3);
    background-color: #2d3748;
}

.search-input::placeholder {
    color: #a0aec0;
}

​
Search Performance

The component fetches all Pokemon names once on mount, creating a complete searchable index.
onMounted(async () => {
    await fetchAllPokemons();
    fetchPokemons();
});
The search performs partial string matching, so searching for “char” will match “Charmander”, “Charizard”, and “Charmeleon”.

​
Integration with Pagination

When a search query is active, pagination is effectively bypassed to show all matching results:
  • No search query: Shows paginated results (20, 50, or 100 per page)
  • Active search: Shows all matching Pokemon from the complete dataset
  • Clear search: Returns to paginated view

​
User Experience Features

  • Focus state: The input has a prominent blue glow when focused
  • Placeholder text: Clear instruction “Buscar Pokémon…”
  • Instant feedback: Results update as you type with no debounce delay
  • Case insensitive: Searches work regardless of capitalization
  • Partial matching: Find Pokemon with partial name matches

Pokemon Browser

Main grid view with pagination

Ability Explorer

Filter Pokemon by their abilities

Build docs developers (and LLMs) love

Get started for freeTalk to us