Wednesday, November 23, 2011

How to create a simple Wildcard People Search Box Web Part for SharePoint 2010

If your users are complaining about so-called "invalid" results being returned whenever they perform a people search on part of a given person's name (i.e. expecting my name to be at the top of the list of returned results if "Sher" is typed in the search textbox), they most likely don't know that you can add a wildcard character, *, to the search parameter (i.e. "Sher*") to get the results they might expect.  One possible solution to this problem is to use the following steps to create a custom HTML/Javascript version of the People Search Box web part that automatically appends a wildcard character, *, to the end of their search parameter:

    1. Open your web browser and navigate to the page that contains the current People Search Box web part
    2. Select Site Actions -> Edit Page
    3. Click on your web part's menu and select Edit Web Part
    4. Expand Display Properties and click on the XSL Editor... button
    5. In the Text Editor window, copy the existing XSL to a temporary location since you'll probably need it again.  Here is a possible option for you:
      1. Hit Ctrl+a to highlight all of the content
      2. Hit Ctrl+c to save the content
      3. Open Notepad
      4. Hit Ctrl+v to past the content to Notepad
    6. Return to the Text Editor window, hit Ctrl+a, and hit Delete
    7. Copy and paste the HTML and Javascript code below into the Text Editor window:
    8. Click Save
    9. Click OK
    10. Publish the page
NOTE:  You may need to modify the getSearchUrl method if your search center url is a bit different than the one I specified here.

If the new web part works as expected, you can then hide the original People Search Box web part and you're done!  With that being said, here is the code you will need to copy for Step #7...

<div>
    <table border="0" ID="WildcardPeopleSearchTable" width="500px">
        <tr >
            <td class="ms-sbcell" align="left" style="width: 450px" >
                <input id="txtSearchParameter" name="txtSearchParameter" type="text" onkeypress="pressEnter()" onFocus="this.select();" class="ms-sbplain peopleInput" style="width: 100%"/>
            </td>
            <td class="ms-sbgo ms-sbcell">
                <img id="btnSearch" alt="Search" onmouseover="mouseOverImage();" onmouseout="mouseOutImage();" src="/_layouts/images/gosearch30.png" onkeydown="if (event && event.keyCode==13) search();" onclick="search()" style="border-width:0px;" />
            </td>
        </tr>
    </table>
</div>
<script language="javascript" type="text/javascript">
    document.getElementById("txtSearchParameter").focus();
    function mouseOverImage() 
    {
        document.getElementById("btnSearch").src = "/_layouts/images/gosearchhover30.png";
    }
    function mouseOutImage() 
    {
        document.getElementById("btnSearch").src = "/_layouts/images/gosearch30.png";
    }
    function pressEnter() 
    {
        if (window.navigate) 
        {
            if ((event.which && event.which == 13) || (event.keyCode && event.keyCode == 13)) {
                search();
            }
        }
    }
    function search() 
    {
        var resultsUrl = getSearchUrl();
        var space
        var searchParameter = document.getElementById("txtSearchParameter").value;
        resultsUrl = resultsUrl + "?k="
        if (searchParameter != "") 
        {
            resultsUrl = resultsUrl + searchParameter + "*";
        }
        window.location.replace(resultsUrl)
    }
    function getSearchUrl() 
    {
        var searchUrl;
        searchUrl = window.location.protocol + '//' + window.location.hostname + '/search/Pages/peopleresults.aspx';
        return searchUrl;
    }
</script>

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.