Javascript – Select Box Search & Elimination
Posted on 17 June 2009 by Jason Grimme
At work we have an internal application for managing support tickets. During a few stages of the process we have a select box with over 10,000 options – no joke. I’m not going to waste the space to show you what a dropdown box with 10,000 options looks like, but it is a mess. My rule of thumb is that a dropdown box should have no more than 100 items. Once you move past 100, you have to create a better way to display your data.
Creating a new method of display was not an option in this scenario, so I created a box on top that allows you to search through all the options, and only display the options that match your search string. The script initially removed all non-matches, but that created a problem with typos and needing to go back. The best solution was rather than removing the option, to hide it it so that it can be enabled again.
On an interesting note(for someone like me, leastways), I was able to cut the execution time of this script by almost half by eliminating as many variables and document calls(getElementById()) as I could without compromising portablility. Switching the options style.display property took longer than simply removing it, but that is the price you pay for added usability I suppose. If you are up for the challenge, you could initially store all the options in a variable and every time you apply the filter use the original options, but I did not consider that necessary for my situation.
Not very complex code, but a great solution to a common problem.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <script language="JavaScript" type="text/javascript"> function filterSelectBox(filterButton) { var searchValue = document.getElementById('selectFilter').value.toLowerCase(); var selectField = document.getElementById("mySelect"); var optionsLength = selectField.options.length; for(var i = 0; i < optionsLength; i++) { if (selectField.options[i].innerHTML.toLowerCase().indexOf(searchValue) >= 0) { selectField.options[i].style.display = 'block'; }else{ selectField.options[i].style.display = 'none'; } } } </script> |
Sample HTML that implements this script:
1 2 3 4 5 6 7 | <input type="text" id="selectFilter" name="selectFilter" /> <input type="button" id="filterButton" value="Filter" onClick="filterSelectBox(this)"/><br /> <select name="mySelect" id="mySelect"> <option value="Frodo">Frodo Baggins</option> <option value="Gandalf">Gandalf</option> <option value="Samwise">Samwise Gamgee</option> </select> |
Thanks so much for posting this, works perfectly!
not working in IE
Brnco, I have tested this in IE and it worked. What version are you using?
Did the code for the option boxes still load? Wouldn\’t 10,000 options in the code affect the loading time of the page or is that kind of irrelevant? I am using an ExtJS component but I am worried that 10,000 options tags in the code will affect the loading times so I am thinking of switching it to a text input box and using a pure javascript method of getting it from a data source on the fly. Has the 10,000 options tags affected you though?
Since the javascript only runs only once the user starts typing, this script only affects the load time in the thousandth of a second it would take to transfer the 1kb of added code to the page.
If you chose to make an onLoad function that pre-loaded up all the select options in an array, then yes it would – but that is not what we are doing.
In other words, when using this code on 10,000 options, there should not be an increase in load time.
Great function, you just saved me a lot of time, thanks!
Brilliant piece of code. Thanks a ton. Very useful.