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]
    }
  }
});

这将在您每次输入更改值时触发一个功能。在这里，它调用了arrow函数，其中打包了用户输入某些文本时要执行的所有动作。

编辑

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

来获取输入值

match()可能是一个示例：

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

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

从特定的DOM部分搜索数据

1 个答案: