1. We have moved from vBulletin to XenForo and you are viewing the site in the middle of the move. Though the functional aspect of everything is working fine, we are still working on other changes including the new design on Xenforo.
    Dismiss Notice

Problem in onkeyup event

Discussion in 'JavaScript and AJAX' started by newphpcoder, Dec 19, 2011.

  1. newphpcoder

    newphpcoder New Member

    Joined:
    Sep 24, 2010
    Messages:
    101
    Likes Received:
    0
    Trophy Points:
    0
    Occupation:
    Web Programmer
    Location:
    Philippines
    Hi...

    Before I got problem in choosing employee name list using onkeyup ...up and down key..and now with the help of toher programmer i solved it but I notice that it was affected in my textbox..

    Everytime I type in textbox for search like for example i type a then after i press a the focus was go to the first employee name..

    and I think the reason why it happened is the new script.

    here is my new code:
    Code:
    <script>
    window.onload = function() {   
      var ul = document.getElementById('searchpayroll');
      var links = ul.getElementsByTagName('a');
      var i = 0;
     
     document.onkeyup = function(e){ 
      //function(e){    
     e = window.event || e;
        
        
       var key = e.charCode || e.keyCode;
       
        //if (key == 38) {
          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>
    
    and here is my javascript code for search;
    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>
    
    and the 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 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 "<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();   
    
    and SearchData.php
    Code:
    <?php
    session_start();
    $queryStr = trim($_GET["queryEmpID"]);
    $_SESSION['empID'] = $queryStr; 
    session_write_close();
    header("Location:DisplayEmpPayroll.php");
    exit();
    ?>
    
    Thank you so much
     
    Last edited: Dec 19, 2011

Share This Page