CODEWITHSUNDEEP
javascriptdrop-down-menubootstrap-5svelte
user17410204
user17410204

Reputation: 41

Dropdown select not working with single option in Svelte

I have a dropdown menu in my Svelte application that displays a list of players. I want to be able to search for a player in this list and have the dropdown menu show only the players that match the search query. However, when there is only one matching player in the list, I am unable to select (update) that player from the dropdown menu; but the dropdown menu displays one player. How can I fix this issue?

Select

<select class="form-select" bind:value={player_id} id="player">
                    {#each players as player}
                        {#if !tournament.players.includes(player._id) && player.name
                                .toLowerCase()
                                .includes(searchTerm.toLowerCase())}
                            <option value={player._id}>{player.name}</option>
                        {/if}
                    {/each}
                </select>

Search bar

<input class="rounded line"
 type="text"
 bind:value={searchTerm}
 placeholder="Search for a player"
/>

Update button

<button class="btn btn-primary line"
 on:click={addPlayerToTournament}>Update
</button>

UPDATED Function addPlayertoTournament

function addPlayerToTournament() {
        tournament.players.push(player_id);
        tournament.players = tournament.players;
        axios
            .put(
                "http://localhost:3001/api/tournaments/" + tournament_id,
                tournament
            )
            .then((response) => {
                getTournament();
            });
    }

I have tried using the includes function to check if the player's name is included in the search term, and then using an if statement to only show players that meet this condition in the dropdown menu.

I would appreciate any help or suggestions on how to resolve this problem.

Upvotes: 1

Views: 753

Answers (1)

user17410204
user17410204

Reputation: 41

I wanted to thank user @Corrl for all of their help and effort in providing a working solution. I am now able to move forward with my project and I am very grateful for their contributions. I have attached the solution that worked for me in the end, let me know if you have any questions.

Code Block

<script>
let searchTerm = "";
let selectablePlayers = [];

$: calculateSelectablePlayers(searchTerm, tournament)

function calculateSelectablePlayers(searchTerm, tournament) {
        console.log('calculate - only runs if searchTerm or tournament changes')
        if(searchTerm || tournament.players.length > 0) {
            selectablePlayers = players.filter(player => {
                const notYetInTournament = !tournament.players.includes(player._id)
                const searchTermInName = player.name.toLowerCase().includes(searchTerm.toLowerCase())
                return notYetInTournament && searchTermInName
            })
            if(searchTerm) player_id = selectablePlayers[0]?._id ?? ''
        } else {
            selectablePlayers = players
        }
    }

function addPlayerToTournament() {
        tournament.players = [...tournament.players, player_id];
        player_id = "";
        console.log(tournament.players);
        axios
            .put(
                "http://localhost:3001/api/tournaments/" + tournament_id,
                tournament
            )
            .then((response) => {
                getTournament();
            });
    }

</script>

<body>
      <div>
                <h3>Add Players</h3>
                <!-- Add an input element for the search bar -->
                <div
                    class="input-button-container mb-2"
                    style="display: flex; align-items: center;"
                >
                    <input
                        class="rounded line"
                        type="text"
                        bind:value={searchTerm}
                        placeholder=" Search for a player"
                    />
                    <button
                        class="btn btn-primary line"
                        on:click={addPlayerToTournament} disabled={player_id === ''}>Update</button
                    >
                </div>

                <select class="form-select" bind:value={player_id} id="player">
                    <option value="" disabled>please select player</option>
                    {#each selectablePlayers as player, i}
                        <option value={player._id}>{player.name}</option>
                    {/each}
                </select>
            </div>
</body>

Upvotes: 2

Related Questions