如何实现搜索功能？

问题描述 投票：0回答：0

我想添加一个搜索功能“filterPokemon();”到我的图鉴。到目前为止我的尝试都失败了，只要你在搜索中输入一个名字，所有的神奇宝贝都会被隐藏。此外，您应该能够删除带有“x”的搜索，并且应该显示所有口袋妖怪。

有人能帮忙吗？

谢谢。

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="img/web.ico">
  <link rel="stylesheet" href="style.css">
  <!--<link rel="shortcut icon" href="#">-->
  <title>Pokedex</title>
</head>
<body>
  <header>
    <div class="menuBar">
      <div class="headerLeft">
        <img src="img/International_Pokemon_logo.png">
      </div>
      <div class="headerRight">
        <input type="text" id="search" placeholder="Search Pokemon" onkeydown="filterPokemon()">
      </div>
    </div>
  </header>

  <div id="pokeContainer" class="pokeContainer"></div>

  <script src="script.js"></script>

  <footer>
    <div>
      <a href="sources.html">Quellen</a>
    </div>
  </footer>
  <button onclick="topFunction()" id="top" title="Go to top"><img src="img/chevron-up-solid.svg" alt=""></button>
  <script src="button.js"></script>
</body>
</html>

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Helvetica';
    background-color: rgb(244 244 244 / 36%);
}

/*++++++++++++++++++ HEADER ++++++++++++++++++*/

.menuBar {
    height: 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
}

.headerLeft img {
    object-fit: contain;
    margin-left: 20px;
    height: 80px;  
}

.headerRight {
    display: flex;
    flex: 0.3;
    align-items: center;
    margin-right: 20px;
    margin-top: 16px;
    margin-left: 50px;
    justify-content: flex-end;
} 

.headerRight input {
    border: none;
    width: 70%;
    font-size: medium;
    background-color: rgb(244 244 244 / 80%);
    padding: 10px;
    border-radius: 10px;
    outline-color: rgb(244 244 244);
}

#searchBall {
    width: 35px;
    padding-bottom: 5px;
}

header {
    margin-bottom: 20px;
    position: fixed;
    width: 100%;
    z-index: 1;
}

/*++++++++++++++++ TOP BUTTON ++++++++++++++++*/

#top {
    position: fixed;
    width: 50px;
    height: 50px;
    bottom: 70px;
    right: 30px;
    z-index: 99;
    outline: none;
    border: none;
    cursor: pointer;
    padding: 9px;
    border-radius: 4px;
    background-color: #375daa;
    border-radius: 50px;
}
  
#top:hover {
    background-color: #555;
}

#top span {
    color: white;
}

/*++++++++++++++++++ FOOTER ++++++++++++++++++*/

footer {
    background-color: white;
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 15px;
}

footer div a {
    text-decoration: none;
    color: black;
}

/*++++++++++++++++ POKE CONTAINER ++++++++++++++++*/

.pokeContainer {
    display: flex;
    flex-wrap: wrap;
    align-items: space-between;
    justify-content: center;
    margin: 0 auto;
    max-width: 1200px;
    padding-top: 150px;
}

.pokemon {
    background-color: #eee;
    border-radius: 20px;
    box-shadow: 0 3px 15px rgba(100, 100, 100, 0.5);
    margin: 10px;
    padding: 20px;
    text-align: center;
    display: flex;
    width: 250px;
    height: 250px;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.pokemon .imgContainer {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    text-align: center;
    margin-bottom: 10px;
    position: relative;
    right: 20px;
}

.pokemon .imgContainer img {
    padding-top: 10px;
    max-width: 100%;
}

.pokemon .pokemonInfo {
    margin-top: 5px;
    padding-bottom: 15px;
}

.pokemon .pokemonId {
    background-color: rgba(0, 0, 0, 0.09);
    border-radius: 10px;
    font-size: 0.8em;
    padding: 7px 12px;
    position: relative;
    right: 107px;
    top: 5px;
    color: white;
    font-weight: bold;
}

.pokemon .pokemonName {
    margin: 15px 7px 12px 7px;
    letter-spacing: 1px;
    color: white;
}

.pokeball {
    position: absolute;
    padding-left: 80px;
    padding-bottom: 80px;
    transform: rotate(5deg);
    opacity: 0.5;
}

.pokemonType {
    background-color: rgba(0, 0, 0, 0.09);
    border-radius: 10px;
    font-size: 0.8em;
    padding: 7px 12px;
    color: rgb(255, 255, 255);
    font-weight: 500;
}

const pokeContainer = document.getElementById('pokeContainer');
const pokemonNumber = 150;
const colors = {
    fire: '#F75131',
    grass: '#7BCE52',
    electric: '#FFC532',
    water: '#58ABF6',
    ground: '#D6B55A',
    rock: '#BCA55A',
    fairy: '#E4A5E5',
    poison: '#B45AA4',
    bug: '#ADBD20',
    dragon: '#7B62E7',
    psychic: '#FF72A5',
    flying: '#9CACF5',
    fighting: '#A35139',
    normal: '#ADA594'
};

const mainTypes = Object.keys(colors);

const fetchPokemons = async () => {
    for (let i = 1; i <= pokemonNumber; i++) {
        await getPokemon(i);
    }
}

const getPokemon = async id => {
    const url = `https://pokeapi.co/api/v2/pokemon/${id}`
    const res = await fetch(url);
    const pokemon = await res.json();
    createPokemonCard(pokemon);
}

fetchPokemons();

function createPokemonCard(pokemon) {
    const pokemonElement = document.createElement('div');
    pokemonElement.classList.add('pokemon');
    
    const pokemonTypes = pokemon.types.map(element => element.type.name);
    const type = mainTypes.find(type => pokemonTypes.indexOf(type) > -1);
    const name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1);
    const color = colors[type];

    pokemonElement.style.backgroundColor = color;

    const pokemonInnerHTML = `
        <span class="pokemonId"># ${pokemon.id.toString()
            .padStart(3, '0')}</span>
            <img class="pokeball" src="img/ball_transparent.png">
        <div class="imgContainer">
            <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${pokemon.id}.png">
        </div>
        <div class="pokemonInfo">
            <h3 class="pokemonName">${name}</h3>
            <small class="pokemonType">${pokemonTypes.join(', ')}</small>
        </div>
        
    `;

    pokemonElement.innerHTML = pokemonInnerHTML;

    pokeContainer.appendChild(pokemonElement);
}
  
  function filterPokemon() {
    let search = document.getElementById('search').value;
    search = search.toLowerCase();
    let content = document.getElementById('pokeContainer');
    content.innerHTML = '';
    for (let i = 0; i < pokemon.name.length; i++) {
        const name = pokemon.name[i]['name'];
        if (name.toLowerCase().includes(search)) {
            createPokemonCard(i);
        }
    }
}
javascript search pokeapi
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.