Live search results from dxTagBox?

Question

I'm trying to connect the dxTagBox to my search function and I can't figure out how to get the two working together.

It seems like that tag box is looking for a predefined set of results on load but I want to generate results based on what the user types in:

Search Function:

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

DataSource:

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

TagBox:

$("#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

I think your code is ok but you have a problem in your data source, so try this, it is working as you want:

Api code (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;
        }

Data Source this is where your problem is, look at this part in particular 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,
        });