Creating Staff Directory Web part

Recently I had requirement to create a staff directory web part which intranet users can use to search for staff members in the organization. The web part displayed below use the people search to display results.

Search Results:


SCRIPT:

<script type="text/javascript" language="javascript">

//function for enter on keyboard and apostrophes in search strings
function txtWildPeopleFinder_KeyDown(e) {
if (e.keyCode == 13 || e.keyCode == 10) {
e.returnValue = false;
doWildPeopleSearch();
return false;
}
else {
return true;
}
}

function escapestr(str) {
return str.replace("'", "%22");
}

//staff search
function doWildPeopleSearch() {

var firstname = escapestr(document.all["firstname"].value);
var lastname = escapestr(document.all["lastname"].value);
var department = escapestr(document.all["department"].value);

var url = "";

if (firstname == "" && department == "" && lastname == "") {
alert ("Please enter first name, last name or department to search for a staff member.")
return;
}
// buliding url string
if (firstname != "") {
url += "FirstName%3A" + firstname;
}
if (lastname != "") {
if (url != "") url += "%20";
url += "LastName%3A" + lastname;
}
if (department != "") {
if (url != "") url += "%20";
url += "Department%3A" + department;
}



var staffSearchResultsPageUrl = "/search/Pages/peopleresults.aspx";

window.location = staffSearchResultsPageUrl + "?k=" + url;
return;
}
</script>

CSS:

<style type="text/css">
.label {
float: left;
width: 80px;
}
.staffDirectory div {
padding:5px 0px 0px 0px;
}
</style>

HTML:

<div class="staffDirectory">
<div>
Enter all or part of a name e.g. A will find all names beginning with A
</div>
<div class="label">
First Name:</div>
<div class="">
<input name="firstname" id="firstname" onkeydown="txtWildPeopleFinder_KeyDown(event)"
type="text" size="25" maxlength="55" /></div>
<div class="label">
Last Name:</div>
<div>
<input name="lastname" id="lastname" onkeydown="txtWildPeopleFinder_KeyDown(event)"
type="text" size="25" maxlength="55" /></div>
<div class="label">
Department:</div>
<div>
<input name="department" id="department" onkeydown="txtWildPeopleFinder_KeyDown(event)"
type="text" size="25" maxlength="55" />
</div>
<div>
<input type="button" value="Search" onclick="doWildPeopleSearch()"/>
</div>
</div>