Searchbuilder - server-side filter with auto-complete

amacourek

I am looking for ideas for best implementing server-side filtering. I have not be able to find a good example with server-side providing values. I have seen examples with hard-coding values like:

 .on('xhr.dt', function (e, settings, json, xhr) { 
                    json.searchBuilder = { 
                        options: { isActive: [{ value: "true", label: "True" }, { value: "false", label: "False" }] } 
                    }; 
                })

I would really like to have the drop-down for values to have the user type and have a list presented rather than a whole list being returned.

kthorngren

The SearchBuilder server side processing docs state this:

There are two caveats that SearchBuilder's server-side integration carries. The first is that anywhere select elements would normally be used on the client-side, input elements are used instead. This reduces strain on the server significantly, drastically improving performance.

Kevin

allan

You could probably use Select2 similar to this client side example. I've never tried it with server side processing, but it could work okay. Just a little work involved in setting it up and doing the Ajax integration.

Allan

amacourek

The ajax is not really a problem. I am building columns and the table dynamically. I need to find a way to make it data driven since the names the columns are different.

amacourek

Here is my code in progress:

$(".dtsb-searchBuilder").on('dtsb-inserted', function (e) {
                var nodename = e.target.nodeName.toLowerCase();
                if (nodename == "input"){
                    var criteriaRow = $(e.target).closest('div.dtsb-criteria')[0];
                    if (criteriaRow != null){
                        var dataVal = $($(criteriaRow).children('.dtsb-data')[0]).val();
                        var operator = $($(criteriaRow).children('.dtsb-condition')[0]).val();
                        var dataCol = parseInt(dataVal);
                        var field = tableColumns[dataCol].data;
                        if (serverValColumns.indexOf(field) > -1) {
                            if (operator == '=' || operator == '!=') {
                                $(e.target).autocomplete({
                                    source: function (request, response) {
                                        $.ajax({
                                            type: 'GET',
                                            url: '?handler=SearchValues',
                                            data: "query=" + request.term + "&field=" + field,
                                            headers: {
                                                RequestVerificationToken:
                                                    $('input:hidden[name="__RequestVerificationToken"]').val()
                                            },
                                            dataType: 'json',
                                            success: function (data) {
                                                response(data);
                                            },
                                            error: function (err) {
                                                console.log('No match.');
                                            }
                                        });
                                    },
                                    minLength: 2,
                                });

                            }
                        }

                    }
                }
            });

amacourek

Well, I am able to get server-side values to show with auto-complete when a user types. The problem is that the value that is sent with the criteria is what the user typed, not the value from the auto-complete. For example, with a fruit column, typing "ora" would show Orange in the list. Clicking this populates the input box with "Orange", but the criteria is "ora". Is there another method that needs called?

amacourek

I was able to get this to work. The code is looking for keypress event to work with live searching. I added this line after setting the value and it worked:

this.dispatchEvent(new KeyboardEvent('keypress'));