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>

Hide the left navigation panel of a SharePoint page

If you're looking for a quick way to hide the left navigation panel of a single SharePoint page, a possible solution is to follow the steps I document in my Quick method for testing CSS style changes on a SharePoint site post and replace the HTML in Step #12 with the following code:

For SharePoint 2007:

<style>
.ms-navframe { display:none; }
</style>

For SharePoint 2010:

<style>
#s4-leftpanel { display:none; }
.s4-ca { BACKGROUND: none transparent scroll repeat 0% 0%; MARGIN-LEFT: 5px; }
</style>

This will hide the left navigation panel on the page in which the Content Editor web part is installed.  If you wish to hide the panel for the entire site, you can add this CSS rule to a custom CSS file and apply it yo your site.

Quick method for testing CSS style changes on a SharePoint site

I've got a good trick for rapidly evaluating CSS style changes on a SharePoint site without having to go through all the steps required for uploading a custom style sheet.  This works great if you simply wish to tweak the style rules to determine how changes will impact the look of a given page.  The method involves using a standard Content Editor web part to host a CSS style element and will operate in the same fashion as if you were applying a custom stylesheet against the particular page you're viewing.  The following steps are applicable to SharePoint 2010, but the same technique can be used on SharePoint 2007 with minor variation to the steps:

1. Open your web browser to the page of your SharePoint site which you'd like to view your CSS style changes 
2. Click on Site Actions -> Edit Page
3. Locate the Bottom Zone and click Add a Web Part
4. Under Categories, select Media and Content
5. Under Web Parts, select Content Editor
6. Click the Add button
7. Locate the newly added web part and click on the dropdown arrow in the upper right hand corner
8. Select the Edit Web Part option
9. Under Layout, place a check in the Hidden checkbox
10. In the Content Editor web part, click on the link that reads Click here to add new content link
11. In the Format Text ribbon, click on the HTML button and select Edit HTML Source
12. In the HTML Source dialog, enter the following HTML:
    

    <style> 
    
    
    Insert CSS rule changes here...
    
    
    </style>
    

13. Click OK
14. Click OK

You will now be able to view how the CSS style updates will impact your page without having to jump through the hoops of uploading a custom stylesheet.  Once you've finalized all of your style changes, you can then add them to a custom CSS file, apply the custom CSS to your site, and then delete this Content Editor web part.

Purpose of this site

I've got a couple of reasons for creating this blog that I'll highlight as follows:

First...

I can't even begin to tell you how many times I've written some code or made some tweak to one of our environments that I've had to revisit/reuse a few months down the road. One purpose of this blog is that it'll allow me to store various random helpful nuggets of information for later use. If it helps you solve a problem or give you some good ideas...even better!

Second...

I have interests in many different technologies and a major part of my job is trying to identify the strengths and weaknesses of various platforms for solving different types of problems. My thought is that this blog could provide a good platform for relaying those experiences. Perhaps it might help validate a technology decision you've made, steer you in the right direction, or help you avoid pitfalls...who knows!

Last, but no least...

I've got a ton of developer tips and tricks stored in my brain that I think would be beneficial to share with the general development community. Some of these nuggets of wisdom will be obvious to those well-versed in the given platform, but could prove invaluable to those who are still learning the nuances of it.

Anyway, those are my initial reasons for creating this site, but I do plan to take creative liberties with it and we'll see where it goes from here!