代码之家 › 专栏 › 技术社区 › empz

剑道UI:如何从Multiselect获取文本输入

kendo-multiselect kendo-datasource kendo-ui

1

empz · 技术社区 · 8 年前

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

我想知道如何在剑道UI Multiselect中发送输入文本。当我说输入文本时,我指的是用户在从列表中选择任何内容之前在输入中键入的内容。该文本必须传递给数据源传输。读取选项。

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

注意:上面的示例不会进行任何过滤。但如果键入“bre”,控制台应记录 searching bre 。

1 回复 | 直到 8 年前

1

6

David Lebee 8 年前

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

默认情况下,读取是GET请求,因此它将添加到指定url的查询字符串中。

如果它是一个帖子,它将被添加到帖子值中。

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