Hello, for work I have been building a dropdown with around 600 elements, and was asked to make it searchable so that anyone taking it would not have to scroll for ages. I was able to get it all to work, except when I try to have all 600 in the array, towards the bottom it just switches from the red element text, to black. This means it is not able to identify those last 50-100 elements when searching, and I am not sure how to get them all to work. I was wondering if anyone knew a workaround? I am assuming it is something to do with a character limit or memory. Below will be the coding I used, but I cannot list the actual array for privacy. I did try to concat the array with a secondary one of the blacked out elements, but then it would not register any elements. Please let me know your ideas, thanks!
<p> </p>
Award Test
<style>
body {
font-family: Arial, sans-serif;
color: #000000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#search-input {
padding: 10px;
font-size: 16px;
}
#result-list {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
background-color: #696969;
box-shadow: 0 2px 4px rgba(69, 69, 69, 0.1);
display: none;
}
#result-list li {
padding: 10px;
cursor: pointer;
}
#result-list li:hover {
background-color: #ddd;
}
</style>
<input type="text" id="search-input" placeholder="Type to search...">
<ul id="result-list"></ul>
<script>
const bonus =[]
const dataArray = []
// Const botharrays = dataArray.concat(bonus);
const searchInput = document.getElementById('search-input');
const resultList = document.getElementById('result-list');
// Event listener for input field
searchInput.addEventListener('input', function() {
const inputValue = searchInput.value.toLowerCase();
const filteredArray = dataArray.filter(item => item.toLowerCase().includes(inputValue));
// Display filtered results in the dropdown
displayResults(filteredArray);
});
// Function to display search results in the dropdown
function displayResults(results) {
// Clear previous results
resultList.innerHTML = '';
// Display results in the dropdown
results.forEach(result => {
const listItem = document.createElement('li');
listItem.textContent = result;
listItem.addEventListener('click', function() {
// Set selected result in the input field
searchInput.value = result;
// Clear the dropdown
resultList.innerHTML = '';
});
resultList.appendChild(listItem);
});
// Show the dropdown
resultList.style.display = results.length > 0 ? 'block' : 'none';
}
// Close the dropdown if the user clicks outside of it
window.addEventListener('click', function(event) {
if (!event.target.matches('#search-input')) {
resultList.style.display = 'none';
}
});
</script>