Searching for pages in SharePoint online 2013

Question

Pages are not getting filtered based on the search criteria in SharePoint Search Online 2013, Provider Hosted App. Reference for HandleBars

It shows all the results. Below is the search bar and results

This is the code below

HTML file

    <script id="customSearchTemplate" type="text/x-handlebars-template">

    <div class="item people-results">
        <h2>People</h2>
        <ul class="search-list">
            {{> peopleResults}}
        </ul>
        <div class="spinner hide"></div>
        <div class="message hide"></div>
    </div>
    <div class="item documents-results">
        <h2>Documents</h2>
        <ul class="search-list">
            {{> documentsResults}}
        </ul>
        <div class="spinner hide"></div>
        <div class="message hide"></div>
    </div>
    <div class="item sites-results">
        <h2>Sites</h2>
        <ul class="search-list">
            {{> sitesResults}}
        </ul>
        <div class="spinner hide"></div>
        <div class="message hide"></div>
    </div>
   <div class="item events-results">
        <h2>Events</h2>
        <ul class="search-list">
            {{> eventsResults}}
        </ul>
        <div class="spinner hide"></div>
        <div class="message hide"></div>
    </div>

</script>

<script id="peopleResultsPartialTemplate" type="text/x-handlebars-template">
    {{#each this}}
    <li>
        <a href="{{url}}">
            <span class="image">
                <img src="{{pictureUrl}}">
            </span>
            <span class="item-meta">
                <span class="item-title">{{firstName}} {{lastName}}</span>
                {{#if desc}}
                <span class="item-desc">{{desc}}</span>
                {{/if}}
                {{#if workPhone}}
                <span class="item-desc">{{workPhone}}</span>
                {{/if}}
            </span>
        </a>
    </li>
    {{/each}}
</script>

<script id="documentsResultsPartialTemplate" type="text/x-handlebars-template">
    {{#each this}}
    <li>
        <a href="{{url}}">
            <span class="image"></span>
            <span class="item-meta">
                <span class="item-title">{{title}}</span>
                <span class="item-desc">{{date}}</span>
            </span>
        </a>
    </li>
    {{/each}}
</script>

<script id="sitesResultsPartialTemplate" type="text/x-handlebars-template">
    {{#each this}}
    <li>
        <a href="{{url}}">
            <span class="image"></span>
            <span class="item-meta">
                <span class="item-title">{{title}}</span>
            </span>
        </a>
    </li>
    {{/each}}
</script>

JS file

    var searchAgent = function (setting) {
    var controller = {
        spinnerSelector: '.spinner',
        collectionSelector: '.search-list',
        notFoundMessageSelector: '.message',
        notFoundMessage: 'No results were found for this category',
        isOpen: false,
        viewType: { isMobile: false },
        partialTemplate: function () { return this; },
        setting: {
            containerSelector: '',
            queryParams: "",
            mobileQueryParams: "",
            partialName: '',
            partialTemplateSelector: '',
            mapCallback: function () { return this; }
        },
        init: function (setting) {
            var _this = this;
            _this.setting = setting;
            var rawTemplate = $(_this.setting.partialTemplateSelector).html();
            _this.partialTemplate = Handlebars.compile(rawTemplate);
            return _this;
        },
        showResults: function (results) {
            $(this.setting.containerSelector)
            .find(this.collectionSelector)
                .html(this.partialTemplate(results));
            return this;
        },
        showNotFountMessage: function () {
            $(this.setting.containerSelector)
            .find(this.notFoundMessageSelector)
                .removeClass("hide")
                .text(this.notFoundMessage);
            return this;
        },
        hideNotFoundMessage: function () {
            $(this.setting.containerSelector)
            .find(this.notFoundMessageSelector)
                .addClass("hide")
                .text("");
            return this;
        },
        showSpinner: function () {
            $(this.setting.containerSelector)
                .find(this.spinnerSelector)
                .removeClass("hide");
            return this;
        },
        hideSpinner: function () {
            $(this.setting.containerSelector)
                .find(this.spinnerSelector)
                .addClass("hide");
            return this;
        },
        clear: function () {
            return this
                .hideNotFoundMessage()
                .hideSpinner()
                .showResults([]);
        },
        executeQuery: function (term) {
            var _this = this;

            setTimeout(function () {

                var queryUrl = "/_api/search/query?querytext='" + term + "'" + (_this.viewType.isMobile ? _this.setting.mobileQueryParams : _this.setting.queryParams);

                $.ajax({
                    async: true,
                    url: queryUrl,
                    type: 'GET',
                    headers: { 'Accept': 'application/json; odata=verbose' },
                    cache: false,
                    beforeSend: function () {
                        _this
                            .hideNotFoundMessage()
                            .showSpinner();
                    }
                })
                .done(function (data) {
                    if (!data || !data.d) {
                        return _this
                            .hideSpinner()
                            .showNotFountMessage();
                    }

                    var results = data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results;
                    if (results.length === 0) {
                        return _this
                            .hideSpinner()
                            .showResults([])
                            .showNotFountMessage();
                    }

                    var mappedResults = $.map(results.slice(0, 4), _this.setting.mapCallback);

                    return _this
                    .hideSpinner()
                    .hideNotFoundMessage()
                    .showResults(mappedResults);

                })
                .fail(function () {

                    return _this
                        .showResults([])
                        .hideSpinner()
                        .showNotFountMessage();
                });

            }, 1);

            return _this;
        }
    };

    return controller.init(setting);
};

var Widgets = Widgets || {};
(function ($) {
    Widgets.customSearch = {
        name: "Custom Search",
        log: true,
        instance: {},
        load: function () {

            var controller = {
                templateSelector: "#customSearchTemplate",
                rootElement: {},
                searchAgents: [],
                keyHandler: {
                    inputDelay: 800,
                    lastQuery: '',
                    lastTime: -1,
                    minlength: 3
                },
                isOpen: false,
                searchUrl: '',
                template: function () { },
                viewType: { isMobile: false },
                onOpen: function () {
                    var _this = this;

                    var value = _this.getInputValue();
                    if (value.length < _this.keyHandler.minlength) {
                        return _this.clear();
                    }
                    if (value === '*') {
                        return _this.clear();
                    }

                    _this.syncAll();
                    return _this.querySuggestion(value);
                },
                onClose: function () {
                    var _this = this;
                    return _this.syncAll();
                },
                onViewTypeChanged: function () {
                    var _this = this;
                    _this.syncAll();
                    return _this.syncAll();
                },
                syncAll: function () {
                    var _this = this;
                    _this.searchAgents.forEach(function (item) {
                        item.viewType = _this.viewType;
                        item.isOpen = _this.isOpen;
                    });
                    return _this;
                },
                init: function (element) {
                    var _this = this;
                    _this.searchUrl = agn.configuration.SearchUrl;

                    _this.rootElement = element ? $(element) : $(".custom-search");

                    var rawTemplate = $(_this.templateSelector).html();
                    _this.template = Handlebars.compile(rawTemplate);

                    var peopleSearch = new searchAgent(
                        {
                            containerSelector: ".people-results",
                            queryParams: "&trimduplicates=false&rowlimit=4&selectproperties='AgnPreferredFirstName%2cAgnPreferredLastName%2cAgnDepartment%2cAccountName%2cWorkPhone%2cAgnJobTitle%2cAgnPrimaryPhoneNumber'&sourceid='" + agn.configuration.PeopleResultSourceId + "'",
                            mobileQueryParams: "&trimduplicates=false&rowlimit=2&sourceid='" + agn.configuration.PeopleResultSourceId + "'",
                            partialName: "peopleResults",
                            partialTemplateSelector: "#peopleResultsPartialTemplate",
                            mapCallback: function (value) {
                                var resultsRow = value.Cells.results;
                                var accountName = encodeURIComponent(agn.getResultValueByKey("AccountName", resultsRow));

                                var photoUrl = "/" + _spPageContextInfo.layoutsUrl + "/userphoto.aspx?size=M&accountname=" + accountName;
                                return {
                                    url: agn.configuration.viewProfileUrl + '?accountname=' + accountName,
                                    pictureUrl: photoUrl,                                   
                                    firstName: agn.getResultValueByKey("AgnPreferredFirstName", resultsRow),
                                    lastName: agn.getResultValueByKey("AgnPreferredLastName", resultsRow),
                                    desc: agn.getResultValueByKey("AgnJobTitle", resultsRow),
                                    workPhone: agn.getResultValueByKey("AgnPrimaryPhoneNumber", resultsRow)
                                };
                            }
                        });

                    peopleSearch.viewType = _this.viewType;
                    _this.searchAgents.push(peopleSearch);
                    Handlebars.registerPartial(peopleSearch.setting.partialName, peopleSearch.partialTemplate);

                    var documentSearch = new searchAgent(
                        {
                            containerSelector: ".documents-results",
                            queryParams: "&trimduplicates=false&rowlimit=4&sourceid='" + agn.configuration.DocumentsResultSourceId + "'",
                            mobileQueryParams: "&trimduplicates=false&rowlimit=2&sourceid='" + agn.configuration.DocumentsResultSourceId + "'",
                            partialName: "documentsResults",
                            partialTemplateSelector: "#documentsResultsPartialTemplate",
                            mapCallback: function (value) {
                                var resultsRow = value.Cells.results;
                                return {
                                    url: agn.getResultValueByKey("Path", resultsRow),
                                    title: agn.getResultValueByKey("Title", resultsRow),
                                    date: $.format.date(new Date(agn.getResultValueByKey("LastModifiedTime", resultsRow)), 'MM.dd.yy')
                                };
                            }
                        });

                    documentSearch.viewType = _this.viewType;
                    _this.searchAgents.push(documentSearch);
                    Handlebars.registerPartial(documentSearch.setting.partialName, documentSearch.partialTemplate);

                    var sitesSearch = new searchAgent(
                        {
                            containerSelector: ".sites-results",
                            queryParams: "&trimduplicates=false&rowlimit=4&sourceid='" + agn.configuration.SitesResultSourceId + "'",
                            mobileQueryParams: "&trimduplicates=false&rowlimit=2&sourceid='" + agn.configuration.SitesResultSourceId + "'",
                            partialName: "sitesResults",
                            partialTemplateSelector: "#sitesResultsPartialTemplate",
                            mapCallback: function (value) {
                                var resultsRow = value.Cells.results;
                                return {
                                    url: agn.getResultValueByKey("Path", resultsRow),
                                    title: agn.getResultValueByKey("Title", resultsRow)
                                };
                            }
                        });

                    sitesSearch.viewType = _this.viewType;
                    _this.searchAgents.push(sitesSearch);
                    Handlebars.registerPartial(sitesSearch.setting.partialName, sitesSearch.partialTemplate);


                    /*var eventsSearch = new searchAgent(
                        {
                            containerSelector: ".events-results",
                            queryParams: "&trimduplicates=false&rowlimit=4&selectproperties='Path%2cUrl%2cTitle%2cEventDateOWSDATE%2cRefinableDate00'&sourceid='" + agn.configuration.EventsResultSourceId + "'",
                            mobileQueryParams: "&trimduplicates=false&rowlimit=4&selectproperties='Path%2cUrl%2cTitle%2cEventDateOWSDATE%2cRefinableDate00'&sourceid='" + agn.configuration.EventsResultSourceId + "'",
                            partialName: "eventsResults",
                            partialTemplateSelector: "#eventsResultsPartialTemplate",
                            mapCallback: function (value) {
                                var resultsRow = value.Cells.results;
                                return {
                                    url: encodeURI(agn.getResultValueByKey("Path", resultsRow)),
                                    title: agn.getResultValueByKey("Title", resultsRow),
                                    date: $.format.date(new Date(agn.getResultValueByKey("RefinableDate00", resultsRow)), 'MM.dd.yy')
                                };
                            }
                        });

                    eventsSearch.viewType = _this.viewType;
                    _this.searchAgents.push(eventsSearch);
                    Handlebars.registerPartial(eventsSearch.setting.partialName, eventsSearch.partialTemplate); */

                    _this.rootElement.find('.search-flyout').html(_this.template({}));

                    _this.rootElement.find("#cancelSearch").off()
                        .on("mousedown touchstart", function () {
                            _this.cancelSearch();
                        })
                        .on("click", function () {
                            _this.cancelSearch();
                        });

                    _this.rootElement.find("#performSearch").off()
                        .on("click", function () {
                            _this.peformSearch();
                    });

                    _this.rootElement.find("#headerInput").off()
                        .on("keyup", function (event) {
                            var invalidKeys = [9, 16, 17, 18, 19, 20, 33, 34, 35, 36, 37, 38, 39, 40, 91, 92, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 144, 145];
                            if (event.which === 0) {
                                return;
                            }
                            if (event.which === 13) { // enter
                                return _this.peformSearch();
                            }
                            if (event.which === 27) {
                                return _this.cancelSearch();
                            }
                            if (event.which === 8) {
                                if (_this.getInputValue() === '*' || _this.getInputValue() === '') {
                                    if (_this.isOpen) {
                                        return _this.close();
                                    }
                                    return;
                                }
                            }

                            if (invalidKeys.indexOf(event.which) >= 0) {
                                return;
                            }

                            if (!_this.isOpen) {
                                _this.open();
                            }

                            _this.keyHandler.lastTime = new Date().getTime();

                            setTimeout(function () {
                                var currentTime = new Date().getTime();
                                var dif = currentTime - _this.keyHandler.lastTime;
                                if (dif < _this.keyHandler.inputDelay || !_this.isOpen) {
                                    return;
                                }
                                var value = _this.getInputValue();
                                if (value.length < _this.keyHandler.minlength) {
                                    return;
                                }
                                if (value === '*') {
                                    return;
                                }
                                return _this.querySuggestion(value);
                            }, _this.keyHandler.inputDelay);
                        });

                    $('body').on('mousedown touchstart', function (event) {
                        if ($(event.target).closest(_this.rootElement).length === 0) {
                            return _this.close();
                        }
                    });                 

                    _this.rootElement.on("onOpen", function (event) {
                        return _this.onOpen(event);
                    });

                    _this.rootElement.on("onClose", function (event) {
                        return _this.onClose(event);
                    });

                    _this.rootElement.on("onViewTypeChanged", function (event) {
                        return _this.onViewTypeChanged(event);
                    });

                    pTracer.end('customSearch');
                    return _this;
                },
                peformSearch: function () {
                    var _this = this;
                    var url = _this.searchUrl + '#k=' + _this.getInputValue();
                    window.location.replace(url);
                    return this;
                },
                getInputValue: function () {
                    var _this = this;
                    return _this.rootElement.find("#headerInput").val() + '*';
                },
                cancelSearch: function () {
                    var _this = this;
                    _this.rootElement.find("#headerInput").val("");

                    _this.searchAgents.forEach(function (item) {
                        item.clear();
                    });
                    return _this.close();
                },
                querySuggestion: function (term) {
                    var _this = this;
                    _this.searchAgents.forEach(function (item) {
                        item.executeQuery(term);
                    });

                    return _this;
                },
                clear: function () {
                    var _this = this;
                    _this.searchAgents.forEach(function (item) {
                        item.clear();
                    });

                    return _this;
                },
                open: function () {
                    var _this = this;
                    if (!_this.isOpen) {
                        _this.isOpen = true;
                    }
                    if (!_this.rootElement.find("div.input").is(".focus")) {
                        _this.rootElement.find("div.input").addClass("focus");
                    }

                    _this.rootElement.trigger("onOpen");

                    return _this;
                },
                close: function () {
                    var _this = this;
                    if (_this.isOpen) {
                        _this.isOpen = false;
                    }
                    if (_this.rootElement.find("div.input").is(".focus")) {
                        _this.rootElement.find("div.input").removeClass("focus");
                    }
                    _this.rootElement.trigger("onClose");
                    return _this;
                }
            };

            this.instance = controller;

            return controller.init(this.container);
        }
    };
})(jQuery);

Answer 1

Could you just change containerSelector: ".page-results" to containerSelector: ".item page-results" in above code and try?

Also, I am not sure {{> mypageResults}} where you using this in js code? or have you mistype it in partialName in js code?

Answer 2

Found It! Issue was with Source ID's thats being used. In order to create a custom search we have to create a resultSource with {searchTerm} in it. This allows to search the resultsource based on the string we enter in the search.