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

[aschild]

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.  

[IMDora]

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.

[aschild]

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

[IMDora]

Can I have the URL of your DataPage?

[aschild]

It's a confidential datapage that requires login, etc... is there a different way to troubleshoot?

[IMDora]

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.

[Alison]

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