Javascript 在 PHP 之后运行

Question

我正在运行一个 PHP 文件，该文件使用 JavaScript 添加到从 SQL 数据库中提取的项目列表。搜索过滤器不会影响从 SQL 数据库获取的项目。如何将 sql 项添加到

ul

以便正确过滤？

Index.php，具有“硬连线”项目的 html - 项目 1 和 2

<section>
    <h2>Item Selection</h2>
    <form>
        <input type="text" id="itemSearch" placeholder="Search for items">
    </form>
    <ul id="itemList">
        <li>
            <span>Item 1</span>
        </li>
        <li>
            <span>Item 2</span>
        </li>
    </ul>
</section>

Index.php，将 sql 中的项目添加到

ul

的 php 代码

fetch('get_data.php')
.then(response => response.json())
.then(data => {
    const itemList = document.getElementById('itemList');
    data.forEach(item => {
        const li = document.createElement('li');
        li.innerHTML = "<span></span>";
        li.querySelector('span').textContent = item['ItemName'];
        itemList.appendChild(li);
    });

Index.php，过滤列表的js代码

const itemList = document.getElementById('itemList');
const items = itemList.querySelectorAll('li'); 
const itemSearchInput = document.getElementById('itemSearch');

// Filter item list based on search input
itemSearchInput.addEventListener('input', function() {
    const searchQuery = itemSearchInput.value.trim().toLowerCase();
    items.forEach(item => {
        const itemName = item.querySelector('span').textContent.toLowerCase();
        if (itemName.includes(searchQuery)) {
            item.style.display = 'block';
        } else {
            item.style.display = 'none';
        }
    });
});

Answer 1

将

items

移至侦听器函数中，因此它始终获取当前的项目集，而不是首次加载时页面上的项目（这是一个空列表，因为它们是动态添加的）。

const itemList = document.getElementById('itemList');
const itemSearchInput = document.getElementById('itemSearch');

// Filter item list based on search input
itemSearchInput.addEventListener('input', function() {
  const items = itemList.querySelectorAll('li');
  const searchQuery = itemSearchInput.value.trim().toLowerCase();
  items.forEach(item => {
    const itemName = item.querySelector('span').textContent.toLowerCase();
    if (itemName.includes(searchQuery)) {
      item.style.display = 'block';
    } else {
      item.style.display = 'none';
    }
  });
});