时间戳

首页 > 解决方案 > 从特定 DOM 部分搜索数据

javascript - 从特定 DOM 部分搜索数据

问题描述

我有一个搜索输入字段，我想动态获取用户的输入并更新包含在<div>

我正在为目录设置搜索解决方案，您可以在其中显示项目列表。

现在，所有项目都立即显示。

html

                <input type="search" id="search-field" placeholder="Search...">
            </div>
<div class="container">
            <p id="guide">Select a category from the menu</p>
            <ul id="product-list">
            </ul>
            <script src="./preload.js"></script>
        </div>

js代码

    var fileList = document.getElementById('product-list');

    var title = document.getElementById('guide');
    title.innerHTML = `You are looking at the ${products} catalog.`;

    for(var i = 0; i < thumbFiles.length; i++){
        var pathName = thumbFiles[i];
        var finalName = pathName.split('/').pop();
            fileList.innerHTML = document.getElementById('product-list').innerHTML + 
            `<li class="product-container">
                <div class="new-thumb">
                <a href="${(items[i])}" id='product-placeholder' target="_blank">
                    <img src="${(thumbFiles[i])}" alt="thumb" class="thumbnail">
                </a>
                <h4>${(path.parse(finalName).name)}</h4>
            </li>`
    };
}

我希望<ul>使用目录中的搜索输入文本匹配元素来更新。

标签： javascriptsearch

解决方案

您可以将oninput侦听器附加到您的元素，如下所示：

在你的 js 脚本中

const myInput = document.querySelector(‘#search-field’);
const fileList = document.querySelector('#product-list');

myInput.addEventListener(‘input’, () => {
  // Don’t forget to clean your results on each new input
  fileList.innerHTML = ‘’;

  for(const index in thumbFiles) {
    const pathName = thumbFiles[index];
    const finalName = pathName.split('/').pop();

    // Here is the function that will check if your current item match user input
    if (match(finalName, myInput.value)) {
      fileList.innerHTML += [your stuff]
    }
  }
});

每次您的输入改变值时，这将触发一个函数。在这里，它调用了我们的箭头函数，我们在其中打包了当用户输入一些文本时我们想要执行的所有操作。

编辑

忘记与当前输入进行比较。您可以通过调用获取输入值myInput.value

一个例子match()可以是：

function match(name, userInput) {
  return name.includes(userInput);
}

这将只检查 finalName 是否包含用户输入。

推荐阅读