jqueryweb-servicesasp.net-web-apijquery-tokeninput

JQuery tokenInput (tags) : how do i filter results from webservice? It always displaying all items


I have a .tokenInput which does a search/autocomplete with data returned from my webservice; this works well..

My problem is that no matter what i'm searching for, it always returns all items from the webservice, and not filtering out those which does not fit the searchstring/tagname i'm inputting...

... therefore i have tried to modify the returned result in the onResult: event, but with no success...

About the returned data :

An array of X [Objects], where each object contains id and name

And... the fun part (the script)

$("#articleTags").tokenInput("api/Article/GetClubTags", {
    crossDomain: false,
    prePopulate: $(this).data("pre"),
    theme: "facebook",
    preventDuplicates: false,
    allowFreeTagging: true,
    tokenValue: 'name',
    onResult: function (items) {
        if ($.isEmptyObject(items)) {
            return [{ id: '0', name: $("tester").text() }];  // if tag not found on server (this works)..
        } else {
            var tagsearch = $("tester").text();  // for example "Norway".

            var arrayMatch = items.forEach(function (itm) {
                if (itm.name === tagsearch) {
                    console.log("FOUND > " + itm.name);  // output works when i type in the correct string
                    return itm;
                }
            });
            console.log(items);
            return items; // just displaying all items, not filtering out those who does not match the string.
        }
    }
});

Solution

  • Actually... i figured out the solution by myself and some more hours of testing out with queryparameters and such :

    The solution is to do a function-call fetching the typed value and compose the api url with that like this :

    function callWebServiceUrl() {
        return "api/Article/GetClubTags/" + $("tester").text();
    }
    
    $("#articleTags").tokenInput(callWebServiceUrl, {
        crossDomain: false,
        prePopulate: $(this).data("pre"),
        theme: "facebook",
        preventDuplicates: false,
        allowFreeTagging: true,
        tokenValue: 'name',
        onResult: function (item) {
            if ($.isEmptyObject(item)) {
                return [{ id: '0', name: $("tester").text() }];
            } else {
                return item;
            }
        },