我正在尝试使用Kendo UI MultiSelect从API中选择一些东西。API不会返回所有项目,因为它们太多了。只会返回包含的内容searchTerm
。
我试图弄清楚如何在Kendo UI Multiselect中发送输入文本。当我说输入文本时,是指用户在从列表中选择任何内容之前输入的内容。该文本必须传递到DataSource transport.read选项。
请参阅此Codepen以了解https://codepen.io/emzero/pen/NYPQWx?editors=1011
注意:上面的示例不会进行任何过滤。但是,如果您键入“ bre”,则控制台应登录searching bre
。
使用读取传输选项中的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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句