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>

Custom Coding a searchable dropdown menu, issue with array

Custom Coding a searchable dropdown menu, issue with array | Experience Community