时间戳

首页 > 解决方案 > 带有 JavaScript 的搜索栏输入功能

javascript - 带有 JavaScript 的搜索栏输入功能

问题描述

对不起，如果我拼错了什么或使用了错误的词，在 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 按钮

标签： javascriptfunctionobjectinputsearchbar

解决方案

不知道我的读心器里的电池电量有多好，但由于电视目前很狡猾，我试了一下。

注意事项：

  • 我使用了该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>

推荐阅读