テキストフィールドをクリックしないでajax show table listを作る方法

Question

私はajaxを使ってライブ検索を作成しました。しかし、問題は、リストされたすべてのデータを表示するために入力フィールドを最初にクリックする必要があることです。この理由は、keyup機能である可能性があります。私はそれを何に置き換えるべきか分からない。私は焦点を合わせるように変更しようとしましたが、その後、データを表示しないajaxです。私はajaxに精通していません。

ここに私の入力コードとajaxがあります。

<p style="text-align: center">Enter your search here: <input type="text" id="search" name="search" placeholder="Enter your search here">&nbsp;&nbsp;<b><i>ex: d1234567891.. hazwan.. etc.. </i></b></p> 
<div id="result" class="login"></div> 
<script type="text/javascript"> 
$(document).ready(function(e) { 
     $("#search").keyup(function() { 
      $("#result").show(); 
      var x = $(this).val(); 
      $.ajax({ 
       type:'POST', 
       url:'res.php', 
       data:'q='+x, 
       cache:false, 
       success:function(data){ 
        $("#result").html(data) 
       } 
      }); 
     }); 
    }); 

</script> 
</div> 

ここは私のデータベースコードと表示結果です。

//print_r($_GET); 
$q=$_POST['q']; 
$query="SELECT * 
      FROM 
       viewlibrary 
      WHERE 
       studentname LIKE :q OR 
       matricno LIKE :q OR 
       title LIKE :q OR 
       programme LIKE :q OR 
       serialno LIKE :q 
      ORDER BY studentname ASC"; 

$stmt = $db->prepare($query); 
$stmt->bindValue(':q','%'.$q.'%'); 
$stmt->execute(); 

$a = 0; 

if($stmt->rowCount() > 0){ 
    $r=$stmt->fetchAll(); 
    echo "<table class='tablesorter' id='myTable' style='width:97%; table-border: 1'>"; 
     echo "<thead>"; 
     echo "<tr>"; 
     echo "<th>No.</th>"; 
     echo "<th>No.Matric</th>"; 
     echo "<th>Name</th>"; 
     echo "<th>Programme</th>"; 
     echo "<th>Title</th>"; 
     echo "<th>Serial Number</th>"; 
     echo "<th>Availability</th>"; 
     echo "<th>Edit</th>"; 
     echo "<th>Delete</th>"; 
     echo "</tr>"; 
     echo "</thead>"; 
     echo "<tbody>"; 

    foreach($r as $row){ 

      echo "<tr align='center'><td>". ($a+1) ."</td><td>". $row['matricno'] ."</td><td>". $row['studentname'] ."</td><td>". $row['programme'] ."</td><td>". $row['title'] ."</td><td>". $row['serialno'] ."</td><td>". $row['bavailable'] ."</td><td><a href='editpage.php?idstudent=".$row['matricno']."&idbook=".$row['serialno']."'><img src='pic/edit-icon.png' width=15px></a></td><td><a href='deletepage.php?idstudent=".$row['matricno']."&idbook=".$row['serialno']."'><img src='pic/remove-icon-png-15.png' width=15px></a></td></tr>"; 
      $a++; 
    } 
    echo "</tbody>"; 
    echo "</table>"; 
} 
else{ 
    echo "<p align='center'>Nothing to show you :(I am really sorry for this T_T </p>"; 
} 
?> 

私は何時も私はajaxコードに向かって編集をしています、それはもはや走っていません。私はインターネットを見てみるが、ajaxに適したものは見つけられない。 実際には、ページが読み込まれたときにすべてのデータが表示され、ユーザーが入力フィールドをクリックした後には表示されません。

助けてください。

Answer 1

ajaxを別の関数に移動しようとしましたか？

Ex。

function ajaxSearchUpdater(){ 
    $("#result").show(); 
    var x = $('#search').val(); 
    $.ajax({ 
     type:'POST', 
     url:'res.php', 
     data:'q='+x, 
     cache:false, 
     success:function(data){ 
      $("#result").html(data) 
     } 
    }); 
} 
$(document).ready(function(e) { 
    ajaxSearchUpdater();    // fires on document.ready 
    $("#search").keyup(function() { 
     ajaxSearchUpdater();   // your function call 
    } 
}