Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat/Pokemon partial name filter #1065

Merged
merged 4 commits into from May 3, 2024
Merged

Feat/Pokemon partial name filter #1065

merged 4 commits into from May 3, 2024

Conversation

JVMartyns
Copy link
Contributor

@JVMartyns JVMartyns commented Apr 8, 2024 •
edited

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:
image

@Naramsim
Copy link
Member

Naramsim commented Apr 8, 2024

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
Copy link
Member

Naramsim commented May 2, 2024

@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
Copy link
Contributor

@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 Naramsim merged commit 0ecbf73 into PokeAPI:master May 3, 2024
3 checks passed
@Naramsim
Copy link
Member

Naramsim commented May 3, 2024

Thanks @JVMartyns !

@pokeapi-machine-user
Copy link

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 added a commit to PokeAPI/api-data that referenced this pull request May 3, 2024
@pokeapi-machine-user
[Updater Bot] Regenerate data from PokeAPI/pokeapi#1065
8a45580
@pokeapi-machine-user pokeapi-machine-user mentioned this pull request May 3, 2024
Closed
@pokeapi-machine-user
Copy link

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).

Indyandie added a commit to Indyandie/pokeapi that referenced this pull request May 10, 2024
@Indyandie
docs(oas): describe q query string parameter
c4a10e0 
Documents PokeAPI#1065
@Indyandie Indyandie mentioned this pull request May 10, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Naramsim Naramsim Naramsim approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
4 participants
@JVMartyns @Naramsim @Indyandie @pokeapi-machine-user