10

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

enter image description here

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);
  • 2
    Can you explain what your searchAgent does? – Nils Sep 8 '16 at 4:53
  • could you explain Handlebars? – Snickbrack Sep 8 '16 at 7:20
  • Your question is not clear. Add more description – Atish Dipongkor - MVP Sep 8 '16 at 9:16
  • 1
    You didn't specify query text anywhere. Also, you didn't include any code that executes a search. – Paul Schaeflein Sep 8 '16 at 16:47
  • 1
    The registering of your partial mypageResults seems incorrect. Have a look at the documentation: handlebarsjs.com/partials.html – moe Sep 12 '16 at 7:56
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?

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.