Hi..

I don't know if it is javascript or css issue.

I have a navigation list of my employee names and when I click the name his data will display at the right side.

I used onclick for displaying data. Now my superior suggested that much better if he used key done using mouse in choosing employee name. He suggested that the employee that was choose was highlighted then automatically his data will displayed using key. like arrow down and up key. Is it possible? how?

I think should i used onkeyup?but i don't know how it is highlighted?

here is my code for displaying employee names:

search.php
Code:
<?php   
session_start();
include 'config.php';

$queryString = $_GET["query"];

if ($queryString == "" || $queryString == null) {

$sql = "SELECT EMP_ID, CONCAT(LNAME, ', ',  FNAME, ' ', MI, '.') AS FULLNAME FROM PERSONAL 
        ORDER BY FULLNAME ASC";
}
else {


$sql = "SELECT EMP_ID, CONCAT(LNAME, ', ',  FNAME, ' ', MI, '.') AS FULLNAME FROM PERSONAL WHERE CONCAT(LNAME, ', ',  FNAME, ' ', MI, '.')  LIKE '" . $queryString . "%' ORDER BY FULLNAME ASC";

}

$recPersonalQuery = $conn->Execute($sql);
if (!$recPersonalQuery->BOF) {
    $recPersonalQuery->MoveFirst();
}

echo "<hr />";
echo "<ul>";
while (!$recPersonalQuery->EOF) {
    $empID   = $recPersonalQuery->fields["EMP_ID"]; 
    $empFullName = $recPersonalQuery->fields["FULLNAME"];

  echo "<li onclick=changeEmployeePay('$empID'); style= 'font-family:'Times New Roman',Times,serif; font-size:10%;'>$empFullName</li>";
    echo "<hr />";
    $recPersonalQuery->MoveNext();
} 
echo "</ul>";

$recPersonalQuery->Close();
exit();
display names
Code:
<script>
function searchemppay(queryString) {
    var ajaxRequest = remoteRequestObject();
    ajaxRequest.onreadystatechange = function() {
        if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
            var result = ajaxRequest.responseText;
            document.getElementById('searchpayroll').innerHTML = result;
        } 
    } 
    var url = "search.php?query=" + queryString;
    ajaxRequest.open("GET", url, true);
    ajaxRequest.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
    ajaxRequest.send(null);

}

function changeEmployeePay(queryID) {

window.location = "SearchData.php?queryEmpID=" + queryID;
}
</script>

<div id="Search">
<form>
<p class="serif"><b>Search Lastname:</b></p>
<input type="text" name="search_" size="20" onkeyup="searchemppay(this.value);">  
<div id="searchpayroll" style="overflow:auto; height:390px; width:auto; margin-left:2px" >
<hr />
<ul>
{section name=co_emp loop=$personalAll}
<li onclick="changeEmployeePay('{$personalAll[co_emp].EMP_ID}')">{$personalAll[co_emp].FULLNAME}</li>
<!--<li onkeyup="changeEmployeePay('{$personalAll[co_emp].EMP_ID}')">{$personalAll[co_emp].FULLNAME}</li>-->
<hr />
{sectionelse}
<li>No records found</li>
{/section}
</ul>
</div>
</div>
If you have queation for further understanding of my thread feel free to ask me..

Any help is highly appreciated.

Thank you so much