Kendo UI: How to get the text input from the Multiselect

I'm trying to use Kendo UI MultiSelect to select some stuff from an API. The API won't return all items because they are too much. It will only return those that contains the searchTerm.

I'm trying to figure out how to send the input text in a Kendo UI Multiselect. When I say the input text, I mean what the user typed in the input before selecting anything from the list. That text has to be passed on to the DataSource transport.read option.

See this Codepen to understand https://codepen.io/emzero/pen/NYPQWx?editors=1011

Note: The example above won't do any filtering. But if you type "bre", the console should log searching bre.

Use the data property in the read transport options, this allows you to modify the query being sent by returning an object that will later on be serialized in the request.

by default read are GET requests so it will be added to the queryString of your url specified.

If it were to be a POST it would be added to the POST values.

<div id="multiselect"></div>
  <script>
    $('#multiselect').kendoMultiSelect({
        dataTextField: 'first_name',
        dataValueField: 'id',
        filter: "startswith",
        dataSource: {
          serverFiltering: true, // <-- this is important to enable server filtering
          schema: {
                data: 'data'
          },
            transport: {
            read: {
                url: 'https://reqres.in/api/users',
              // this callback allows you to add to the request.
              data: function(e) {
                // get your widget.
                let widget = $('#multiselect').data('kendoMultiSelect');
                // get the text input
                let text = widget.input.val(); 
                // what you return here will be in the query string
                return {
                    text: text
                };
              }
           }
          }
        }
    });
  </script>