Magento 2 custom AJAX advanced Search too slow

Question

I am doing and Custom search that gets the data with java script and parses it into the code

My problem is that its taking too long to load the html since it has to load the whole page

Here is the code I am using to load the data into the page:

        var diamondSearch = {
            clearNumb: $("#clearNumb"),
            filter: $("#filter"),
            table: $("#resuts"),
            request: 0,
            loaded: true,
            index: 1,
            serial: "",
            prefix: "/catalogsearch/advanced/result/?",
            sync: function () {
                if (this.request != 0) {
                    console.log("Aborting Request")
                    this.request.abort()
                }
                if (this.serial != this.filter.serialize()) {
                    //Serialize
                    this.serial = this.filter.serialize();
                    //Make String
                    var loadStr = this.prefix + this.serial;
                    //reset index
                    this.index = 1
                    console.log("Syncing Page")
                    //Ajax Call
                    this.request = $.get(loadStr, {}, function (data) {
                        var $response = $('<div />').html(data);
                        diamondSearch.clearNumb.html($response.find('#numbId:first'));
                        diamondSearch.table.html($response.find('#products > *'))
                    }, 'html');
                    this.loaded = true;
                }
            },
            syncNextPage: function () {
                if (this.loaded == true) {
                    //Serialize
                    this.serial = this.filter.serialize();
                    //indexify
                    this.index++;
                    //Make String
                    var loadStr = this.prefix + this.serial;
                    console.log("Syncing next page")
                    //Ajax Call
                    this.loaded = false;
                    this.request = $.get(loadStr, {}, function (data) {
                        var $response = $('<div />').html(data);
                        diamondSearch.table.append($response.find('#products > *'))
                    }, 'html')
                        .done(function () {
                            diamondSearch.loaded = true;
                            console.log("Finished Loading page "+ diamondSearch.index)
                        })
                    ;
                }
            }
        };

I know I can create a Magento_Catalog/layout/catalog_category_view.xml to remove everything that is not the main content

But my problem with that is that I believe modifying that file also changes the layout for the regular search, and I need this page to render normally

Thank you

Answer 1

I found the solution I just used the REST api for Magento 2 under

(magento host)/rest/V1/products/

and then wrote a custom AJAX solution which is more practical and faster.