来自 dxTagBox 的实时搜索结果？

Question

我正在尝试将 dxTagBox 连接到我的搜索功能，但我不知道如何让两者一起工作。

标签框似乎正在寻找一组预定义的加载结果，但我想根据用户输入的内容生成结果：

搜索功能：

var searchUsers = function (query) {
    return $pnp.sp
        .search({
            Querytext: "*",
            SourceId: "B09A7990-05EA-4AF9-81EF-EDFAB16C4E31",
            StartRow: 0,
            RowLimit: 500,
            RowsPerPage: 50,
            SelectProperties: ["PreferredName", "WorkEmail", "PictureUrl", "AccountName", "JobTitle", "Id"]
        })
        .then((r) => {
            var results = _.filter(r.PrimarySearchResults, user => _.includes(user.AccountName, "membership"));
            // console.log(results)
            var users = results.reduce((prev, u) => {
                prev.push({
                    name: u.PreferredName,
                    loginName: u.AccountName,
                    email: u.WorkEmail
                });
                return prev;
            }, []);

            // console.log(users);
            return users;
        })
        .catch(console.log);
};

数据源：

var peopleSearchDataSource = new DevExpress.data.DataSource({
    load: searchUsers, 
    byKey: function(key) {
        return { id: key };
    }
});

标签框：

$("#productsCustom").dxTagBox({
    dataSource: peopleSearchDataSource,
    displayExpr: "name",
    valueExpr: "uid",
    itemTemplate: function (user) {
        return "<div class='custom-item'><div class='product-name'>" +
            user.name + "</div></div>";
    },
    applyValueMode: 'useButtons',
    showSelectionControls: true,
    hideSelectedItems: true,
    showClearButton: true,
    placeholder: "Select users...",
    searchEnabled: true,
    searchTimeout: 2000,
    showDataBeforeSearch: false, 
    minSearchLength: 2,
    onValueChanged: function (e) {
        e.value.forEach(function (lastUser) {
            ensureUser(lastUser)
                .then(function (user) {
                    $("span:contains('" + user.name + "')")
                        .closest(".dx-tag-content")
                        .addClass("user-validated");
                })
                .catch(function () {
                    console.log("naaaw");
                });
        });
    }
});

Answer 1

我认为你的代码没问题，但你的数据源有问题，所以试试这个，它可以按你的意愿工作：

API 代码（C# web api）

public dynamic Get(string nombre)
        {
            var tTablas = db.TipoTabla.Where(x=>x.tipNombre.Contains(nombre)).Select(x => new { Id = x.Id, Nombre = x.tipNombre });
            return tTablas;
        }

数据源这是你的问题所在，特别看这部分loadOptions.searchValue

var dsTipoTabla = new DevExpress.data.DataSource({
            load: function (loadOptions) {
                var d = $.Deferred();
                $.ajax({
                    url: UrlApi() + '/Api/Tipotabla?nombre=' + loadOptions.searchValue,
                    method: "GET",
                    headers: headers,
                }).done(function (result) {
                    d.resolve(result, {
                    });
                });
                return d.promise();
            },
        });

dxTagBox

 $("#cmbTipoTabla").dxTagBox({
            dataSource: dsTipoTabla,
            placeholder: 'T. Tbl',
            displayExpr: "Nombre",
            valueExpr: 'Nombre',
            minSearchLength: 3,
            searchTimeout: 500,
            searchMode: "contains",
            showClearButton: true,
            placeholder: "Select users...",
            searchEnabled: true,
        });

Answer 2

我可以这样解决：

        source: new DevExpress.data.DataSource({
            sort: "name",
            load: function (loadOptions) {
                // console.log("loadoptions", loadOptions);
                return _searchUsers(loadOptions.searchValue);
            },
            byKey: function (e) {
                //console.log(e);
            }
        }),