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

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

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

 

Share this post


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

×
×
  • Create New...