aschild Posted May 11, 2018 Report Share Posted May 11, 2018 I have a multi-select listbox in a submission form that has 30+ values. I would like to implement a search bar just above the listbox so users can filter the list. The user should be able to search the list, select a value, then search for another value and select it (etc) before submitting the form. When the form is submitted, all selected values register with the submission. Quote Link to comment Share on other sites More sharing options...
IMDora Posted May 14, 2018 Report Share Posted May 14, 2018 Hello aschild, To add a search bar for a multi-select listbox, what you need to do is add an HTML block before your Multi-Select Listbox Element and put in this code: <input type="text" id="myInput" placeholder="Search"> <script> document.getElementById('myInput').onkeyup = function(event) { var items = document.getElementsByClassName('Item'); for (var i = items.length - 1; i >= 0; i--) { if( items.getElementsByTagName('label')[0].innerHTML.toLowerCase().indexOf( document.getElementById('myInput').value ) < 0 ) { items.style.display = 'none'; } else { items.style.display = 'block'; } } } </script> Let me know if this helps. Quote Link to comment Share on other sites More sharing options...
aschild Posted May 14, 2018 Author Report Share Posted May 14, 2018 Hello IMDora, I input the code in an HTML Block but when I typed something in the text box, my multi-select list box didn't filter accordingly. Am I missing something there? Thank you Quote Link to comment Share on other sites More sharing options...
IMDora Posted May 14, 2018 Report Share Posted May 14, 2018 Can I have the URL of your DataPage? Quote Link to comment Share on other sites More sharing options...
aschild Posted May 16, 2018 Author Report Share Posted May 16, 2018 It's a confidential datapage that requires login, etc... is there a different way to troubleshoot? Quote Link to comment Share on other sites More sharing options...
IMDora Posted May 16, 2018 Report Share Posted May 16, 2018 Okay. What seems to be the error? The solution that I provided works perfectly on my end and what it does is find any records that has the value that you put in the search field. Quote Link to comment Share on other sites More sharing options...
Alison Posted November 8, 2018 Report Share Posted November 8, 2018 @aschild You should add i-element to the items array inside the if statement. The code below should work: <input type="text" id="myInput" placeholder="Search"> <script> document.getElementById('myInput').onkeyup = function(event) { var items = document.getElementsByClassName('Item'); for (var i = items.length - 1; i >= 0; i--) { if( items[i].getElementsByTagName('label')[0].innerHTML.toLowerCase().indexOf( document.getElementById('myInput').value ) < 0 ) { items[i].style.display = 'none'; } else { items[i].style.display = 'block'; } } } </script> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.