Kendo UI：如何从Multiselect获取文本输入

Question

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

我试图弄清楚如何在Kendo UI Multiselect中发送输入文本。说输入文本时，是指用户在从列表中选择任何内容之前输入的内容。该文本必须传递到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>