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

Question

我有一个搜索输入字段，我想动态获取用户的输入并更新 <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>与目录中的搜索输入文本匹配元素。

Answer 1

您可以将 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 是否包含用户输入。