Reload grid after update data

[ManuelBorrero95]

Describe the buA clear and concise description of what the bug is.g The Grid.js table is not updating with the new user data when the Enter key is pressed. Despite the correct data being fetched and filtered, the table remains unchanged.

To Reproduce Load the webpage and wait for the initial user data to be fetched and displayed in the Grid.js table. Type a query into the search input field to display suggestions. Press the Enter key to update the table with the filtered user data.

Expected behavior The Grid.js table should update to display only the users that match the query entered in the search input field.

Actual Behavior The Grid.js table does not update and continues to display the initial set of user data.

Desktop (please complete the following information):

• Browser chrome
• Version [e.g. 22]

Code Snippet let users = [];

// Load users from the MVC controller document.addEventListener('DOMContentLoaded', async () => { try { const response = await fetch('/User/GetUsers'); if (!response.ok) { throw new Error(HTTP error! Status: ${response.status}); } users = await response.json(); initializeGrid(users); } catch (error) { console.error('Error loading users:', error); } });

function initializeGrid(data) { // Clear the grid container before rendering const gridContainer = document.getElementById('gridjs'); gridContainer.innerHTML = '';

new gridjs.Grid({
    columns: ['Nome Utente', 'Email', 'Job Title'],
    data: data.map(user => [user.displayName, user.mail, user.jobTitle]),
    search: false,
    pagination: {
        enabled: true,
        limit: 5
    },
    language: {
        pagination: {
            previous: 'Precedente',
            next: 'Successiva',
            showing: 'Mostrando',
            results: () => 'risultati'
        }
    }
}).render(gridContainer);

}

function showSuggestions() { const query = document.getElementById('searchBox').value.toLowerCase(); const suggestionsBox = document.getElementById('suggestions'); suggestionsBox.innerHTML = '';

if (query === '') {
    suggestionsBox.style.display = 'none';
    return;
}

const filteredUsers = users.filter(user => user.displayName.toLowerCase().includes(query));

if (filteredUsers.length === 0) {
    suggestionsBox.style.display = 'none';
    return;
}

filteredUsers.forEach(user => {
    const div = document.createElement('div');
    div.className = 'suggestion-item';
    div.innerHTML = `<a href="#" onclick="selectUser('${user.displayName}')">${user.displayName}</a>`;
    suggestionsBox.appendChild(div);
});

suggestionsBox.style.display = 'block';

}

function handleKeyPress(event) { if (event.key === 'Enter') { event.preventDefault(); // Prevent the default Enter key behavior const query = document.getElementById('searchBox').value.toLowerCase(); const filteredUsers = users.filter(user => user.displayName.toLowerCase().includes(query)); console.log('Filtered Users:', filteredUsers); // Log filtered data initializeGrid(filteredUsers); } }

function selectUser(displayName) { document.getElementById('searchBox').value = displayName; document.getElementById('suggestions').style.display = 'none'; const selectedUser = users.find(user => user.displayName === displayName); initializeGrid([selectedUser]); }