One issue I am facing in my Svelte application is with a dropdown menu that displays a list of players. I am trying to implement a search functionality where the dropdown menu should only show players that match the search query. However, I have encountered a problem - when there is only one player that matches the search query, I am unable to select that player from the dropdown menu even though it displays correctly. How can I resolve this issue?
Player Selection
<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 to Add Player to Tournament
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 attempted to use the includes method to check if the player's name is included in the search term, and then implemented an if statement to display only the players that meet this condition in the dropdown menu.
Any assistance or suggestions on how to tackle this issue would be greatly appreciated.