javascript - Live search results from dxTagBox? -

i'm trying connect dxtagbox search function , can't figure out how 2 working together.

it seems tag box looking predefined set of results on load want generate results based on 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");                 });         });     } }); 

i think code ok have problem in data source, try this, working 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 problem is, @ 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,         });