By modifying Jan‘s script, I created a People Search JQuery which allows partial search on First Name or Last Name.


<script type="text/javascript">
    // QuickSearch v0.2
    // Created by Jan Tielens, http://weblogs.asp.net/jan
    // Modified by Ken Zheng, https://littletalk.wordpress.com
    // This sample code is provided on an “as is” basis and without warranty of any kind.
    
    // *** Customizable parameters ***
    var quickSearchConfig = {
        delay: 500,             // time to wait before executing the query (in ms)
        minCharacters: 3,       // minimum nr of characters to enter before search
        scope: "People",     // search scope to use "All Sites"
        numberOfResults: 15,    // number of results to show
        resultsAnimation: 200,  // animation time (in ms) of the search results
        resultAnimation: 0      // animation time (in ms) of individual result (when selected)
    };    
	
	//Search
	function searchSubmit(){
		var query = $("#quickSearchTextBox").val();
		//window.location="/searchcenter/Pages/Results.aspx?k="+query+"&s=All%20Sites";
		window.location="/searchcenter/Pages/peopleresults.aspx?k="+query;
	}
</script>

<style type="text/css">
    .quickSearchResultDivUnselected
    {
        background: white;
        border: 1px solid white;
        margin-left: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .quickSearchResultDivSelected
    {
        background: #EEEEEE;
        border: 1px solid Gray;
        margin-left: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
<table id="quickSearchTable" class="ms-sbtable ms-sbtable-ex" border="0">
    <tbody>
		<th align="left">People Search</th>
		<tr class="ms-sbrow">
			<td><input type="radio" name="peoplegroup" checked="checked" value="FirstName">First Name</td>
			<td><input type="radio" name="peoplegroup" value="LastName">Last Name</td>
		</tr>
        <tr class="ms-sbrow">
            <td class="ms-sbcell" colspan=2>
                <input style="width: 100%" id="quickSearchTextBox" class="ms-sbplain" title="Enter search words"
                    style="width: 170px" alt="Enter search words" maxlength="200" value="" />
            </td>
            <td class="ms-sbgo ms-sbcell" style="width: 14px">
			  <a id="SearchArea_go" href="javascript:searchSubmit()" title="Go Search">
                <img title="Go Search" style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px;
                    border-right-width: 0px" alt="Go Search" src="/_layouts/images/gosearch.gif" />
		      </a>
            </td>
            <td style="width: 1px">
            </td>
        </tr>
    </tbody>
</table>
<div id="quickSearchResults" style="display: none;">
</div>

<script type="text/javascript">
    var quickSearchTimer;
    var quickSearchSelectedDivIndex = -1;
    
	$('#quickSearchTextBox').click(function(){
		var div = $("#quickSearchResults");
		div.hide('fast');
		return false;
	});
	
    function showResultsDiv(text) {
        var div = $("#quickSearchResults");
        var prevTable = div.prev();

        var divCss = {
            "left": prevTable.offset().left,
            "padding": 2,
            "position": "absolute",
            "top": prevTable.offset().top + prevTable.height() + 1,
            "border": "1px solid #7f9db9",
            "width": prevTable.width() - 3,
            "background": "white",
            "max-width": prevTable.width() - 3
            };
                  
        div.css(divCss).append(text).slideDown(quickSearchConfig.resultsAnimation);
    }
    
    $(document).ready(function() {
        $('#quickSearchTextBox').keyup(function(event) {
            var previousSelected = quickSearchSelectedDivIndex;
            
            // catch some keys
            switch(event.keyCode) {
                case 13:    // enter
                    var selectedDiv = $("#quickSearchResults>div:eq(" + quickSearchSelectedDivIndex + ") a");
                    if(selectedDiv.length == 1)
                        window.location = selectedDiv.attr("href");
                    break;
                case 38:    // key up
                    quickSearchSelectedDivIndex--;
                    break;
                case 40:    // key down
                    quickSearchSelectedDivIndex ++;
                    break;
            }
            
            // check bounds
            if(quickSearchSelectedDivIndex != previousSelected) {
                if(quickSearchSelectedDivIndex < 0)
                    quickSearchSelectedDivIndex = 0;
                if(quickSearchSelectedDivIndex >= $("#quickSearchResults>div").length -1)
                    quickSearchSelectedDivIndex = $("#quickSearchResults>div").length - 2;                
            }
            
            // select new div, unselect the previous selected
            if(quickSearchSelectedDivIndex > -1) {
                if(quickSearchSelectedDivIndex != previousSelected) {
                    unSelectDiv( $("#quickSearchResults>div:eq(" + previousSelected + ")"));
                    selectDiv($("#quickSearchResults>div:eq(" + quickSearchSelectedDivIndex + ")"));
                }
            }
            
            // if the query is different from the previous one, search again
            if($('#quickSearchTextBox').data("query") != $('#quickSearchTextBox').val()) {
                if (quickSearchTimer != null) // cancel the delayed event
                    clearTimeout(quickSearchTimer);
                quickSearchTimer = setTimeout(function() { // delay the searching
                        $("#quickSearchResults").fadeOut(200, initSearch);
                    } , quickSearchConfig.delay);
            }
        });             
    });
    
    function unSelectDiv(div) {
        // first stop all animations still in progress
        $("#quickSearchResults>div>div").stop(true,true);
        
        div.removeClass("quickSearchResultDivSelected").addClass("quickSearchResultDivUnselected");  
        $("#details", div).hide();
    }
    
    function selectDiv(div) {
        div.addClass("quickSearchResultDivSelected");
        $("#details", div).slideDown(quickSearchConfig.resultAnimation);
    }
    
    function initSearch() {
        // first store query in data
        $('#quickSearchTextBox').data("query", $('#quickSearchTextBox').val());
        
        // clear the results
        $("#quickSearchResults").empty();
        
        // start the search
        var query = $("input[@name='peoplegroup']:checked").val() +":" +$("#quickSearchTextBox").val();
		//alert(query);
        if(query.length >= quickSearchConfig.minCharacters) {
            showResultsDiv("Searching ..."); // display status
            search(query);
        }
    }
    
    function search(query) {
        quickSearchSelectedDivIndex = -1;
        var queryXML = 
            "<QueryPacket xmlns='urn:Microsoft.Search.Query' Revision='1000'> \
            <Query domain='QDomain'> \
             <SupportedFormats><Format>urn:Microsoft.Search.Response.Document.Document</Format></SupportedFormats> \
             <Context> \
              <QueryText language='en-US' type='STRING' >SCOPE:\"" + quickSearchConfig.scope + "\"" + query + "</QueryText> \
             </Context> \
            <SortByProperties><SortByProperty name='Rank' direction='Descending' order='1'/></SortByProperties> \
             <Range><StartAt>1</StartAt><Count>" + quickSearchConfig.numberOfResults + "</Count></Range> \
             <EnableStemming>false</EnableStemming> \
             <TrimDuplicates>true</TrimDuplicates> \
             <IgnoreAllNoiseQuery>true</IgnoreAllNoiseQuery> \
             <ImplicitAndBehavior>true</ImplicitAndBehavior> \
             <IncludeRelevanceResults>true</IncludeRelevanceResults> \
             <IncludeSpecialTermResults>true</IncludeSpecialTermResults> \
             <IncludeHighConfidenceResults>true</IncludeHighConfidenceResults> \
            </Query></QueryPacket>";
        
        var soapEnv =
            "<soap:Envelope xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xmlns:xsd='http://www.w3.org/2001/XMLSchema' xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'> \
              <soap:Body> \
                <Query xmlns='urn:Microsoft.Search'> \
                  <queryXml>" + escapeHTML(queryXML) + "</queryXml> \
                </Query> \
              </soap:Body> \
            </soap:Envelope>";

        $.ajax({
            url: "/_vti_bin/search.asmx",
            type: "POST",
            dataType: "xml",
            data: soapEnv,
            complete: processResult,
            contentType: "text/xml; charset=\"utf-8\""
        });
        
        function processResult(xData, status) {
            var html = "";
            $(xData.responseXML).find("QueryResult").each(function() {
                var divWidh = $("#quickSearchTable").width() - 13;
                
                var x = $("<xml>" + $(this).text() + "</xml>");
                x.find("Document").each(function() {
                    var title = $("Title", $(this)).text();
                    var url = $("Action>LinkUrl", $(this)).text();
                    var description = $("Description", $(this)).text()
                    
                    html += 
                        "<div class='quickSearchResultDivUnselected' style='width:" + divWidh + "px;max-width:" + divWidh +"px'> \
                            <a href='" + url + "'>" + $("Title", $(this)).text() + "</a> \
                            <div style='display:none' id='details' style='margin-left:10px'>" 
                                + description + 
                                "<br/>" + url + " \
                            </div> \
                        </div>";
                });
                if(x.find("TotalAvailable").text() != "")
                    html += "<div style='text-align:right'>Total results: " + x.find("TotalAvailable").text() + "</div>";
                else                        
                    html += "<div style='text-align:right'>Total results: 0</div>";
            });
            
            $("#quickSearchResults").empty().append(html);
            $("#quickSearchResults>div>a").hover(
                function() { selectDiv($(this).parent()); },
                function() { unSelectDiv($(this).parent());  }
            );                    
            showResultsDiv();
        }            
    }
    
    function escapeHTML (str) {
       return str.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
    }
</script>
Advertisements