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

Question

我正在尝试使用 Kendo UI MultiSelect 来 select 来自 API 的一些内容。 API 不会 return 所有项目，因为它们太多了。它只会 return 包含 searchTerm.

的那些

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

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

注意：上面的示例不会进行任何过滤。但是如果你输入 "bre"，控制台应该记录 searching bre.

Answer 1

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

默认读取的是 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>

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

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

kendo-ui

kendo-datasource

kendo-multiselect