Feat/Pokemon partial name filter

JVMartyns commented 3 months ago

The partial name filtering feature for Pokémon is being added to enhance the user's experience by allowing them to find Pokémon more efficiently and intuitively. Instead of needing to know a Pokémon's full name to conduct a successful search, users can type in a part of the name and receive a list of Pokémon that match the search criteria.

This is particularly useful in an extensive database where remembering exact names can be challenging, especially for users who are not familiar with all the Pokémon. Partial name filtering also speeds up the user's interaction with the application, making the search process more forgiving and less prone to errors.

Moreover, this functionality can increase the application's accessibility, as even if users make a typo or remember only part of a Pokémon's name, they can still find what they are looking for. In summary, adding this feature aims to make searching more flexible, accessible, and user-friendly for all users.

Here's an example of how this feature can be used in a web page:

The code below implements a simple search field that will search for pokemons as the user writes.

<!DOCTYPE html>
<html>

<head>
    <title>Search Pokemon</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #search-field {
            width: 300px;
            padding: 8px;
            font-size: 16px;
        }

        #result-list {
            list-style-type: none;
            padding: 0;
            margin: 0;
            border: 1px solid #ccc;
        }

        #result-list li {
            padding: 8px;
            cursor: pointer;
        }

        #result-list li:hover {
            background-color: #f4f4f4;
        }
    </style>
</head>

<body>
    <h1>Search Pokemon</h1>
    <input type="text" id="search-field" placeholder="Search...">
    <ul id="result-list"></ul>

    <script>
        function searchPokemon(partialName) {
            var url = 'http://localhost:8000/api/v2/pokemon?limit=10&q=' + partialName;
            return $.ajax({
                url: url,
                dataType: 'json',
                async: false
            }).responseJSON.results.map(function (item) {
                return item.name;
            });
        }

        function updateResultList(results) {
            var resultList = $('#result-list');
            resultList.empty();

            results.forEach(function (result) {
                resultList.append('<li>' + result + '</li>');
            });
        }

        $('#search-field').on('input', function () {
            var partialText = $(this).val();
            var results = searchPokemon(partialText);

            updateResultList(results);
        });

        $('#result-list').on('click', 'li', function () {
            $('#search-field').val($(this).text());
            $('#result-list').empty();
        });
    </script>
</body>

</html>

Captura de tela de 2024-04-08 10-42-27

json response for search partial pokemon name "p" using new query:

Naramsim commented 2 months ago

Hi, thanks for the feature! It seems to me that the query filter is applicable to all endpoints, am I right?

Could you post the result of this request? http://localhost:8000/api/v2/pokemon?limit=10&q=b

Secondly, I don't think we will be able to ship this feature to the publicly accessible API. Due to the caching limits of Cloudflare, we cannot afford to enable such requests to the public. These requests potentially can create many cache keys (cache keys are the full URI) and for us is a big problem. On top of this, we don't run the Django db in production, we just have a JS function.

Having said that, we can more than happily merge in this feature and those who spin up Pokeapi locally would benefit from this feature.

Naramsim commented 2 months ago

@Indyandie if we merge this PR can we duplicate the openapi.yml? This function/functionality will be available locally and not at pokeapi.co

Indyandie commented 2 months ago

@Naramsim we can mention that is local only in the description, and maybe OAS has s flag to handle this scenario. I'll look around...

Naramsim commented 2 months ago

Thanks @JVMartyns !

pokeapi-machine-user commented 2 months ago

A PokeAPI/api-data refresh has started. In ~45 minutes the staging branch of PokeAPI/api-data will be pushed with the new generated data.

The staging branch will be deployed in our staging environment and the entire API will be ready to review.

A Pull Request (master<-staging) will be also created at PokeAPI/api-data and assigned to the PokeAPI Core team to be reviewed. If approved and merged new data will soon be available worldwide at pokeapi.co.

pokeapi-machine-user commented 2 months ago

The updater script has finished its job and has now opened a Pull Request towards PokeAPI/api-data with the updated data.

The Pull Request can be seen deployed in our staging environment when CircleCI deploy will be finished (check the start time of the last build).

PokeAPI / pokeapi

Feat/Pokemon partial name filter #1065