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

dxTagBox的实时搜索结果?

devextreme jquery javascript

Batman · 技术社区 · 7 年前

似乎tag box正在查找加载时的预定义结果集,但我想根据用户键入的内容生成结果:

搜索功能:

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");
                });
        });
    }
});

2 回复 | 直到 7 年前

Victor Hugo Terceros 7 年前

我认为你的代码还可以,但你的数据源有问题,所以试试这个,它正在按你想要的方式工作:

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

数据源 这就是你的问题所在 加载选项。搜索值

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();
            },
        });

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

Batman 7 年前

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