Problem in onkeyup event

newphpcoder · December 19, 2011, 6:45am

Hi…

i got problem in using this code:


<script>
 window.onload = function() { 
  var ul = document.getElementById('searchpayroll');
  var links = ul.getElementsByTagName('a');
  var i = 0;
 
 document.onkeyup = function(e){ 
  
 e = window.event || e;
   
   var key = e.charCode || e.keyCode;

      if (key == 40) { 
      // up pressed
      if (i < links.length - 1) i++; 
    }
    else if (key == 38) {
      // down pressed
      if (i > 0) i--;
    }
    // focus on link
    
    
   links[i].focus();
   
    // request content in here for link with ajax
   // alert(links[i].href);
  }
}
</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 id="searchpayroll" style="overflow:auto; height:385px; width:auto; margin-left:2px;">
<!--<ul>-->
{section name=co_emp loop=$personalAll}
<!--<li onclick="changeEmployeePay('{$personalAll[co_emp].EMP_ID}')">{$personalAll[co_emp].FULLNAME}</li> -->
<li><a href="SearchData.php?queryEmpID={$personalAll[co_emp].EMP_ID}">{$personalAll[co_emp].FULLNAME}</a></li>
<hr />
{sectionelse}
<li>No records found</li>
{/section}
</ul>
</div>

the problem is…when I type in search textfield it focus in the name list…like for example i type a after I press a it was focus in the firstname, which is wrong…

I think it cause from the javascript code…

I want to happen is i continue typing in search textfield.

Thank you

system · December 19, 2011, 7:12am

where is the searchemppay() function?

newphpcoder · December 19, 2011, 7:16am

here is the javascript:


<script>
function searchemppay(queryString) {
  //alert(queryString);
    
    var ajaxRequest = remoteRequestObject();
    ajaxRequest.onreadystatechange = function() {
        if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
            var result = ajaxRequest.responseText;
            //alert(result);
            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>

search.php


<?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 LNAME LIKE '" . $queryString . "%' ORDER BY FULLNAME ASC";
}

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

echo "<hr />";
echo "<ul id='searchpayroll'>";

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 "<a href='SearchData.php?queryEmpID=$empID'; style= 'font-family:'Times New Roman',Times,serif; font-size:10%;'>$empFullName</li>";
    echo "<hr />";
    $recPersonalQuery->MoveNext();
} 
echo "</ul>";

$recPersonalQuery->Close();

exit();    
    
?>

SearchData.php


<?php
session_start();

$queryStr = trim($_GET["queryEmpID"]);

$_SESSION['empID'] = $queryStr; 

session_write_close();
header("Location:DisplayEmpPayroll.php");
exit();
?>

Thank you so much…

my problem is in typing textarea…I think it cause from my script in keycode for up and down?

newphpcoder · December 19, 2011, 7:26am

Before I used this script for up and down key in choosing employee name I don’t have problem in searching employee name:


<script>
 window.onload = function() { 
  var ul = document.getElementById('searchpayroll');
  var links = ul.getElementsByTagName('a');
  var i = 0;
 
 document.onkeyup = function(e){ 
  
 e = window.event || e;
   
   var key = e.charCode || e.keyCode;

      if (key == 40) { 
      // up pressed
      if (i < links.length - 1) i++; 
    }
    else if (key == 38) {
      // down pressed
      if (i > 0) i--;
    }
    // focus on link
    
    
   links[i].focus();
   
    // request content in here for link with ajax
   // alert(links[i].href);
  }
}
</script>

Thank you…

I tried to edit that code but I the key event didi not work…

I don’t know how can i figured out…

newphpcoder · December 19, 2011, 8:08am

I have no idea on what should I need to change in my script for onkeyup so that my search will work again…

Thank you so much…

markbrown4 · December 19, 2011, 10:13am

The simplest thing is to only focus if it’s an up or down keypress.


[B]if (key == 40 || key == 38) {[/B]
   links[i].focus();
[B]}[/B]

newphpcoder · December 19, 2011, 11:17am

when i edit my code:


<script>
window.onload = function() {   
// function() { 
  var ul = document.getElementById('searchpayroll');
  var links = ul.getElementsByTagName('a');
  var i = 0;
 
 document.onkeyup = function(e){ 
  //function(e){    
 e = window.event || e;
 // e = e;     
    
   var key = e.charCode || e.keyCode;
   
   /*if (key == 40 || key == 38) {
   links[i].focus();
   } */

    //if (key == 38) {
    /* if (key == 40) { 
      // up pressed
      //if (i < links.length - 1) i++;
      if (i < links.length - 1) i++; 
        links[i].focus();    
    }
    else if (key == 38) {
      // down pressed
      if (i > 0) i--;
      links[i].focus(); 
     // if (i < 0) i++; 
    }
    // focus on link
    
    // request content in here for link with ajax
   // alert(links[i].href);  */

}
}
</script>

the up and down key did not work, it was always in the first employee name…

Thank you

newphpcoder · December 19, 2011, 11:27am

Now, i fix it using this code:


<script>
window.onload = function() {   
// function() { 
  var ul = document.getElementById('searchpayroll');
  var links = ul.getElementsByTagName('a');
  var i = 0;
 
 document.onkeyup = function(e){ 
  //function(e){    
 e = window.event || e;
 // e = e;     
    
   var key = e.charCode || e.keyCode;
   
   /*if (key == 40 || key == 38) {
   links[i].focus();
   }  */

    //if (key == 38) {
     if (key == 40) { 
      // up pressed
      //if (i < links.length - 1) i++;
      if (i < links.length - 1) i++; 
        links[i].focus();    
    }
    else if (key == 38) {
      // down pressed
      if (i > 0) i--;
      links[i].focus(); 
     // if (i < 0) i++; 
    }
    // focus on link
    
    // request content in here for link with ajax
   // alert(links[i].href);  */

}
}
</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 id="searchpayroll" style="overflow:auto; height:385px; width:auto; margin-left:2px;">
<!--<ul>-->
{section name=co_emp loop=$personalAll}
<!--<li onclick="changeEmployeePay('{$personalAll[co_emp].EMP_ID}')">{$personalAll[co_emp].FULLNAME}</li> -->
<li><a href="SearchData.php?queryEmpID={$personalAll[co_emp].EMP_ID}">{$personalAll[co_emp].FULLNAME}</a></li>
<hr />
{sectionelse}
<li>No records found</li>
{/section}
</ul>
</div>

Thank you so much