Jump to content

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.  

Link to comment
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.

Link to comment
Share on other sites

  • 5 months later...

@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>

 

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...