Create a Dynamic search bar for checkboxes elements JavaScript

I found some informations about search bar. I'm searching for one which show you element according to what you entered in the search bar. But it's always about array or list and I don't succeed in adapt it with my code.

I have a succession of checkboxes created according to an array and I don't know how to proceed.

I whould like something like if I write "J" in the search bar, I would see the checkboxes "January" "June" "July".

Here is a snippet to help you to understand. Please update it in your answer for me to clearly see how you did it. I would prefer Javascript instead of Jquery.

Thanks a lot !

//array of options (change this array and you change the checkboxes)
var choices = new Array();
choices[0] = "January";
choices[1] = "February";
choices[2] = "March";
choices[3] = "April";
choices[4] = "May";
choices[5] = "June";
choices[6] = "July";
choices[7] = "August";
choices[8] = "September";
choices[9] = "October";
choices[10] = "November";
choices[11] = "December";

//array of value which have to be automaticly selected
var target = new Array()
target[0] = "9";
target[1] = "8";
target[2] = "11";

var cbh = document.getElementById('checkboxes');
var val = '';
var cap = "";

var j = "";
var t = document.getElementById('t');

// the loop is creating the checkboxes with name, value...
for (var i in choices) {
  //Name of checkboxes are their number so I convert the i into a string. 
  j = i.toString();

  val = j;
  //cap will be the value/text of choices[i]
  var cb = document.createElement('input');
  var label = document.createElement("label");

  cap = choices[i];
  var text = document.createTextNode(cap);
  cb.type = 'checkbox';
  cbh.appendChild(cb);
  cb.name = cap;
  cb.value = val;
  label.appendChild(cb);
  label.appendChild(text);
  cbh.appendChild(label);
  cb.addEventListener('click', updateText)
  if(target.indexOf(i)>=0){
    cb.checked =true ;
  }
}
//function which update the text area according to which checkbox is selected or not
updateText();
function updateText() {
  t.value = [null, ...document.querySelectorAll('#checkboxes [type="checkbox"]')].reduce((s, el) => el && el.checked ? s = (s || '') + el.value + '$#' : s || '')
}

                      * {
                        box-sizing: border-box;
                        }
                        #data {
                            padding:5px;
                                width:100vw;
                        }
                        .multiselect {
                                overflow: visible;
                                padding:0;
                                padding-left:1px;
                                border:none;
                                background-color:#eee;
                                width:100vw;
                                white-space: normal;
                                height:75px;
                        }
                        .checkboxes {
                                height:100px;
                                width:100px;
                                border:1px solid #000;
                                background-color:white;
                                margin-left:-1px;
                                display:inline-block;
                        }
      
            label {
                                display: inline-block;
                                border: 1px grey solid;
                                padding:5px;
                        }

<span onclick="">All</span> | <span onclick="">Selected</span> <input type="text" id="SearchBar" placeholder="Search for options..">
        <form>
        <div id="data">
                <div class="multiselect">
                        <div id="c_b">
                                <div id="checkboxes">
                                </div>
                        </div>
                </div>
        </div>
</form>

<textarea id="t"></textarea>