带有 JavaScript 的搜索栏输入功能

Question

对不起，如果我拼错了什么或使用了错误的词，在 JS 还是很新的。 因此，我在 HTML 中创建了两个不同的按钮，每个按钮都使用单独的对象列表访问各自的功能。下面是对象列表外观的一个小例子。 我正在尝试创建一个函数，它允许用户能够在输入搜索栏中搜索单词。但是我无法创建此功能以使其对两个按钮都有效，而无需在搜索栏中添加单词之前单击按钮。所以基本上如果搜索词匹配，它应该能够从两个列表中获取选项。

这甚至可能吗，还是我必须调整我已经必须能够制作这样的功能的功能，还是？ （注意示例不包含搜索功能的示例，只是因为我什至不知道从哪里开始） 非常感谢您为我提供的任何帮助。

const liverpoolPlayers = [
    {
        name: "Mohamed Salah",
        age: 27,
        fromCountry: "Egypt",
        position: "Angrep",
        
    },

    {
        name: "Sadio Mane",
        age: 25,
        fromCountry: "Senegal",
        position: "Angrep"

    },

const playersContent = document.querySelector(".product-content")
const playersBtn = document.querySelector("#players-btn")

let showPlayers = () => {
    playersContent.innerHTML = ""
    liverpoolPlayers.forEach(player =>{
        playersContent.innerHTML += `
        <article class="product-article">
            <h3>Name:${player.name}</h3>
            <p>Age: ${player.age}</p>
            <p>Country: ${player.fromCountry}</p>
            <p>Postition: ${player.position}</p>
            <img ${player.img}>
        </article>
        `
    })
}
playersBtn.addEventListener("click", showPlayers)


const wineBtn = document.querySelector("#wine-btn")

let showWines = () => {
        playersContent.innerHTML = ""
        wineList.forEach (wine => {
        playersContent.innerHTML += `
        <article class="product-article">
            <h3>Name:${wine.name}</h3>
            <p>Age: ${wine.age}</p>
            <p>Country: ${wine.fromCountry}</p>
            <p>Postition: ${wine.position}</p>
        </article>
        `

    })

}

wineBtn.addEventListener("click", showWines)

HTML 搜索输入

<section>
    <label>Filtrer etter søkeord</label>
    <input id="search-input">
    <button id="search-btn">Søk</button>
</section>

HTML 按钮

        <primary-button id="players-btn" text="Country"></primary-button>

HTML 按钮

Answer 1

不确定我的读心器中电池的充电情况如何，但由于电视目前很不稳定，我试了一下。

注意事项：

• 我使用了template 元素，因为我发现它可以生成代码 相当干净，更容易阅读。
• 我编造了数据，注意您的代码仅在 显示的列表是玩家的。一个粗略的解决方法 葡萄酒和球员（图像领域）之间的区别在于我 只需选择不显示来自（可能是混合类型）的图像 搜索结果。
• 您在显示的函数中所做的基本相同 每个列表。我把这些浓缩成一个单一的功能 这需要一对输入 - 要显示的数组和一个标志 是否应该尝试显示图像。一种 更好的方法可能是丢弃这个标志，并且在每个项目的基础上， 看看elem.image == undefined。如果是这样，请删除 .image 元素 从显示的文章中，否则，设置其 src 属性。这 将减轻（0）显示时发送真/假的需要 播放器列表或酒单。它也可以“正常工作” 显示混合搜索结果。

试一试：

"use strict";

function byId(id) {
  return document.getElementById(id)
}

const liverpoolPlayers = [{
    name: "Mohamed Salah",
    age: 27,
    fromCountry: "Egypt",
    position: "Angrep",
    image: 'player.png'
  },
  {
    name: "Sadio Mane",
    age: 25,
    fromCountry: "Senegal",
    position: "Angrep",
    image: 'player.png'
  },
];

const wineList = [{
    name: 'Riesling',
    age: 2,
    fromCountry: 'Germany',
    position: ''
  },
  {
    name: 'Champagne',
    age: 27,
    fromCountry: 'France',
    position: ''
  },
]

window.addEventListener('load', onLoad, false);

function onLoad(evt) {
  byId('players-btn').addEventListener("click", onPlayersBtnClicked, false);
  byId('wine-btn').addEventListener("click", onWineBtnClicked, false);
  byId('searchBtn').addEventListener("click", onSearchBtnClicked, false);
}

function onPlayersBtnClicked(evt) {
  displayArray(liverpoolPlayers, true);
}

function onWineBtnClicked(evt) {
  displayArray(wineList, false);
}

function onSearchBtnClicked(evt) {
  let searchTerm = byId('searchInput').value;

  if (searchTerm === '') {
    byId('outputDiv').innerHTML = 'No results match an empty search-string!';
  } else {
    let resultsList = [];
    liverpoolPlayers.forEach(findMatch);
    wineList.forEach(findMatch);
    displayArray(resultsList, false);

    function findMatch(elem, index, arr) {
      if (elem.name == searchTerm)
        resultsList.push(arr[index]);

      else if (elem.age == searchTerm)
        resultsList.push(arr[index]);

      else if (elem.fromCountry == searchTerm)
        resultsList.push(arr[index]);

      else if (elem.position == searchTerm)
        resultsList.push(arr[index]);
    }
  }
}

function displayArray(arr, showImage) {
  let tgt = byId('outputDiv');
  tgt.innerHTML = '';
  arr.forEach(displayElement);

  function displayElement(elem, index, arr) {
    let newElem = byId('itemTemplate').content.cloneNode(true);
    newElem.querySelector('.name').textContent = elem.name;
    newElem.querySelector('.age').textContent = elem.age;
    newElem.querySelector('.country').textContent = elem.fromCountry;
    newElem.querySelector('.position').textContent = elem.position;
    if (showImage === true)
      newElem.querySelector('.image').src = elem.image;
    else
      newElem.querySelector('.image').remove(); // don't show the image

    tgt.appendChild(newElem);
  }
}

<head>
  <template id='itemTemplate'>
    <article class='product-article'>
      <h3>Name: <span class='name'></span></h3>
      <p>Age: <span class='age'></span></p>
      <p>Country: <span class='country'></span></p>
      <p>Position: <span class='position'></span></p>
      <img class='image'/>
  </template>
</head>

<body>
  <button id='players-btn'>Show All Players</button> | <button id='wine-btn'>Show All Wines</button><br>
  <input id='searchInput' placeholder='Name, Age, Country or Position' /><button id='searchBtn'>Search</button><br>
  <div id='outputDiv'></div>
</body>