Question

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

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

请参阅此Codepen以了解 https://codepen.io/emzero/pen/NYPQWx?editors=1011

注意：上面的示例不会进行任何过滤。但是，如果您键入＆＃34; bre＆＃34;，控制台应记录searching bre。

Answer 1

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

默认情况下读取的是GET请求，因此它将被添加到指定网址的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获取文本输入

1 个答案: