Jump to content
aschild

Add a search bar for a multi-select list box on a submission form

Recommended Posts

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.  

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×