Kendo UI：如何从多选中获取文本输入

Question

我正在尝试使用 Kendo UI MultiSelect 从 API 中选择一些内容。 API 不会返回所有项目，因为它们太多了。它只会返回包含searchTerm 的那些。

我试图弄清楚如何在 Kendo UI 多选中发送输入文本。当我说输入文本时，我的意思是用户在从列表中选择任何内容之前输入的内容。该文本必须传递给 DataSource transport.read 选项。

查看此 Codepen 以了解 https://codepen.io/emzero/pen/NYPQWx?editors=1011

注意：上面的例子不会做任何过滤。但是如果你输入“bre”，控制台应该会记录searching bre。

Answer 1

在读取传输选项中使用 data 属性，这允许您通过返回一个稍后将在请求中序列化的对象来修改正在发送的查询。

默认读取的是 GET 请求，因此它将被添加到您指定的 url 的 queryString 中。

如果它是一个 POST，它将被添加到 POST 值中。

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