Custom Search Within A Page

[SteveE]

Here’s some code that creates a custom search in classic web part or wiki page. It will search all web parts only on the current page but regardless if the web parts are batched to show only so many at a time.

Use case: A custom list where I want users to only be able to view or search for entries where their name is in a field, but there are multiple people pickers it could apply to.

Initial setup:

• Set up custom list with permission to edit all items
• Turn off “Allow items from the list to appear in search results”
• Create a view that filters to only return items if their name is in a people picker. Example: Manager (field) is equal to [Me]
• Add a CEWP or Modern CEWP to the page

Add this code to the HTML section of the CEWP:

<style unselectable=”on”>
/* hide default search bar */
#DeltaPlaceHolderSearchArea 
{display: none;}
</style>

Manager:&nbsp;&nbsp;

<script type="text/javascript">
function RedirectUrl()
{
var mgr = document.getElementById("MgrSearch").value;
if(mgr != null)
{
window.location.href="?FilterName=Manager&FilterMultiValue=*"+mgr+"*";
/* Change Manager to your FIN */
}
return false;
}
</script>
<input type="text" style="width: 100px" id="MgrSearch" onkeydown="if (event.keyCode == 13) {return RedirectUrl();; return false;}"/>
<input type="button" style="min-width: 45px; padding: 3px; margin: 1 0 0px" id="MgrSearch" value="Search" onclick="return RedirectUrl();" />

• This topic was modified 3 years ago by SteveE.

[Alexander Bautz]

Thanks for sharing this tip!

Alexander

[Author]

Posts