KendoUI AutoComplete显示带有所选文本的十字图标

时间:2016-11-07 07:00:45

标签: kendo-ui kendo-autocomplete

是否可以从KeondoUI Autocomplete配置所选选项?我期待用十字图标显示文本,因此当用户点击十字时,该值将从自动完成框中删除。架构下面的代码在文本框中显示为html,我无法解析它。

enter image description here

参考代码:

        $("#txtSearch").kendoAutoComplete({
            template: '<span class="hide">#: data.Value #</span><span>#:     data.Text #    </span>',
            dataTextField: "Name",
            filter: "contains",
            minLength: 3,
            placeholder: "Find User",
            separator: ", ",
            noDataTemplate: 'No user found',
            dataSource: dataSourceForUser,
            select: onSelectUser
        });

        function onSelectUser(e) {        
            selectedAttendees.push({
                Value: e.item["0"].childNodes["0"].outerText,
                Text: e.item["0"].childNodes["1"].outerText,
                AdditionData: e.item["0"].childNodes["2"].outerText
            });

            console.log(selectedAttendees);
        }

        var dataSourceForUser = new kendo.data.DataSource({
            type: "json",
            serverFiltering: true,
            transport: {
                read: {
                    url: "someUserFilter",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json"
                },
                parameterMap: function (options, operation) {
                    if (operation === "read") {
                        return { content: options.filter.filters["0"].value };
                    }
                }
            },
            schema: {
                parse: function (response) {
                    var length = response.length;
                    var dataItem;
                    var idx = 0;

                    for (; idx < length; idx++) {
                        dataItem = response[idx];
                        dataItem.Name = '<span style=\'border:1px solid red;\'>' + dataItem.Text + '</span>';
                    }

                    return response;
                }
            }
        });

任何帮助都将不胜感激。

0 个答案:

没有答案