How to get value of searchbox input field on bootstrap-select?

Here is my html code:

 <select id="myselect" class="selectpicker" data-live-search="true" placeholder="please type" data-live-Search-Placeholder="search">
   <option value="111">AAAAAAAAAAA</option>
   <option value="222">bbbbbbbbbbb</option>
   <option value="333">cccccccccc</option>
</select>

Here is my javascript code:

$(function(){
   var select1 = $('#myselect').selectpicker();
    //var mysearchkeyword = $('#myselect').selectpicker('search.initiated').val();
    //var mysearchkeyword = $('#myselect').selectpicker('search.input').val();
    var mysearchkeyword = $('#myselect').selectpicker('.bs-searchbox').val();

   select1.on('changed.bs.select', function (e) {
    alert(mysearchkeyword);
    
   });
})

Here is my fiddle: JSFiddle

I want to get the data of searchbox input in bootstrap-select. For example if I type "a" in searchbox I want it to get the "a" as alert message. I read this guide and tried a few ways but it didn't work. Can you please help me?

Thanks in advance.

Since the value will constantly change, I would create the variable as the actual element.

If you look at the DOM structure, you'll see that the div.bs-searchbox element is a child of a sibling element to the $('#myselect') element.

So, to get the div.bs-searchbox element, first get the parent of the $('#myselect') element, then use .find('.bs-searchbox > input') to search it's dependents, to get the <input> child of the div.bs-searchbox element (remember that it is the input element that has the value of the search, not the .bs-searchbox div element).

Then on your event listener, just get the .val() of your searchBoxElement variable.

See snippet below

$(function() {
  var select1 = $('#myselect').selectpicker();
  //var mysearchkeyword = $('#myselect').selectpicker('search.initiated').val();
  //var mysearchkeyword = $('#myselect').selectpicker('search.input').val();
  //var mysearchkeyword = $('#myselect').selectpicker('.bs-searchbox').val();
  var searchBoxElement = $('#myselect').parent().find('.bs-searchbox > input');

  select1.on('changed.bs.select', function(e) {
    alert(searchBoxElement.val());
  });
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/css/bootstrap-select.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/js/bootstrap-select.min.js"></script>

<select id="myselect" class="selectpicker" data-live-search="true" placeholder="please type" data-live-Search-Placeholder="search">
  <option value="111">AAAAAAAAAAA</option>
  <option value="222">bbbbbbbbbbb</option>
  <option value="333">cccccccccc</option>
</select>