OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Show/Hide HTML list items based on ajax results

  • Thread starter Thread starter Exosylver
  • Start date Start date
E

Exosylver

Guest
I'm running a PHP file that uses javascript to add to a list of items that is pulled from a sql database. The search filter does not affect the items that were taken from the sql database. How can I get the sql items added to the ul so that it properly gets filtered?

Index.php, the html that has the "hardwired" items- items 1 and 2

Code:
<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, php code that adds the items from sql to the ul

Code:
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 code that filters the list

Code:
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';
        }
    });
});

<p>I'm running a PHP file that uses javascript to add to a list of items that is pulled from a sql database. The search filter does not affect the items that were taken from the sql database. How can I get the sql items added to the <code>ul</code> so that it properly gets filtered?</p>
<p>Index.php, the <em>html</em> that has the "hardwired" items- items 1 and 2</p>
<pre><code><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>
</code></pre>
<p>Index.php, php code that adds the items from sql to the <code>ul</code></p>
<pre><code>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);
});
</code></pre>
<p>Index.php, js code that filters the list</p>
<pre><code>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';
}
});
});
</code></pre>
 

Latest posts

Top