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);
searchAgent
does?Handlebars
?mypageResults
seems incorrect. Have a look at the documentation: handlebarsjs.com/partials.html