Power Pages gives us the ability of adding a search option to Lists out of the box, which is a great functionality if you consider the effort if we had to implement this manually.
By default, the search looks for the exact match on all columns available in the List, and if you need to use a LIKE operator, you need to add a wildcard (*) to the search term.
If you are coming from a Dynamics 365 background, you are probably very familiar with this behaviour, but when thinking of external users, this might not be the case, and the experience may not be natural to users.
In this quick article I want to share a JavaScript code that will automatically inject an * to the search term whenever the user performs a search. Initially when trying this out I thought it would be a lot easier than it actually was, so here I will explain all the functions and the logic behind the code:
- AddSearchWildcard: This function will get the text input element for the search, and add a * in the start of the search term
- ClearWildcardSearch: This function will remove the * from the text input so it all looks transparent to the user
- ClearSearchTooltip: By default, we have a tooltip explaining to the user to add a *, however this is not necessary, so this function complete removes the tooltip.
- BindFirst: This function is used to enforce that our AddSearchWildcard function will be executed prior to the search itself
- document.ready: Finally on document ready the we are registering the BindFirst Function and adding the necessary functions to the appropriate event listeners.
And the full code is:
$(document).ready(function () {
$.fn.bindFirst = BindFirst;
var list = $(".entitylist.entity-grid").eq(0);
list.on("loaded", function () {
var searchButton = $('.entitylist-search > div.input-group-btn > button');
searchButton.bindFirst("click", AddSearchWildcard);
searchButton.on("click", ClearWildcardSearch);
ClearSearchTooltip();
});
});
function AddSearchWildcard() {
var queryInput = $("input.query");
var queryInputValue = queryInput.val();
if (!!queryInputValue && !queryInputValue.startsWith("*")) {
$(queryInput).val("*" + queryInputValue);
}
};
function ClearWildcardSearch() {
var queryInput = $("input.query");
var queryInputValue = queryInput.val();
if (!!queryInputValue && queryInputValue.startsWith("*")) {
queryInput.val(queryInputValue.substring(1, queryInputValue.length));
}
}
function ClearSearchTooltip() {
var queryInput = $("input.query");
queryInput.attr("aria-label", "");
queryInput.attr("data-original-title", "");
};
function BindFirst(eventName, eventHandler) {
var elem, handlers, i, _len;
this.bind(eventName, eventHandler);
for (i = 0, _len = this.length; i < _len; i++) {
elem = this[i];
if (!!elem.tagName && elem.tagName == "BUTTON") {
handlers = $._data(elem).events[eventName.split('.')[0]];
handlers.unshift(handlers.pop());
}
}
}
Conclusion
This solution is great to enhance the user experience when searching within Lists, however keep in mind that this performs a server-side search on every column available in the list, so if you have too many columns and records on your list this might decrease your Portal performance. Before publishing this make sure that your list is already optimized with only necessary columns.
Oliver Rodrigues 