Отображение результатов поиска на одной странице без обновления страницы

Question

При просмотре веб-сайта я нашел интересную функцию, которую мне нравится в моем приложении. Это похоже на отображение результата поиска на одной странице без обновления страницы. Когда кто-то заполняет последнее поле формы, он показывает результат поиска на той же странице, не обновляя страницу. В форме нет кнопки отправки или какой-либо ссылки для отправки данных формы, когда кто-то заполняет последнее поле его результатом поиска и отображает результат , Я хочу реализовать эту функцию в своем приложении, встроенном в PHP. Я знаю, что это может быть сделано Javascript & Ajax, но у меня недостаточно знаний об этих языках. Я только что узнал HTML, CSS, PHp & MySql. Позвольте мне показать U мой код

HTML:

<form action="do_search.php" method="post"/> 
Enter Number:<input type="text" name="roll" id="roll"> 
<input type="submit" value="search record"/> 

do_search.php:

<?php 
    include 'includes/dbConnect.php'; 
?> 
<?php 
    $roll = $_POST['roll']; 
    $result = mysql_query("SELECT * FROM students WHERE Roll_No = '$roll'") or die("SELECT Error: ".mysql_error()); 
    $num_rows = mysql_num_rows($result); 
    ?> 
<table width="100%" bgcolor="#F7F7F7" border="0"> 
<?php 
if ($num_rows!=0) 
{ 
?> 
<tr style="text-align:left;"> 
    <td width="7%" align="center" bordercolor="#CCCCCC" bgcolor="#996600" class="heading"><strong>#</strong></td> 
    <td width="13%" align="left" bordercolor="#CCCCCC" bgcolor="#996600" class="heading"><strong>Roll No</strong></td> 
    <td width="29%" align="left" bordercolor="#CCCCCC" bgcolor="#996600"class="heading"><strong>Name</strong></td> 
    <td width="23%" align="left" bordercolor="#CCCCCC" bgcolor="#996600" class="heading"><strong>Father Name</strong></td> 
    <td width="16%" align="center" bordercolor="#CCCCCC" bgcolor="#996600" class="heading"><strong>Class</strong></td> 
    <td width="12%" align="center" bordercolor="#CCCCCC" bgcolor="#996600" class="heading"><strong>Section</strong></td> 

</tr> 
    <?php 
//$counter = 1; 
    while ($get_info = mysql_fetch_row($result)) 
    { 
     print '<tr class="text-data">'; 
     print '<td align="center" valign="top">' . $get_info[0] . '</td>'; 
     print '<td align="left" valign="top"> 
     <a href="edit_Student.php?roll_no=' . $get_info[1] . '" style="color:#000"><b>' . $get_info[1] . '</b></td>'; 
     print '<td align="left" valign="top">'. $get_info[2] . '</td>'; 
     print '<td align="left" valign="top">' . $get_info[3] . '</td>'; 
     print '<td align="center" valign="top">' . $get_info[4] . '</td>'; 
     print '<td align="center" valign="top">' . $get_info[5] . '</td>'; 
     print '</tr>'; 
     //$counter++; 
    } 
} 
else 
{ 
?> 
<tr style="text-align:left;"> 
    <td align="center" colspan="7"> 
     No Student Found ! 
    </td> 
</tr> 
<?php 
} 
?> 
</table> 

Это работает хорошо для меня и отображения записи на do_search.php странице. Я хочу, чтобы в моей форме не было кнопки кнопки отправки &, когда кто-то вводит поле формы. Введите номер рулона, он должен отображать запись на той же странице и отображать всю запись из базы данных. Может ли кто-нибудь помочь мне в этом. Заранее спасибо

Answer 1

Использование Jqyery KeyDown() Метод

$("input").keydown(function(){ 
    //Do display logic 
    // Use Ajax and get the data for the value enter and update your html content 
}); 

http://www.w3schools.com/jquery/event_keydown.asp

Answer 2

Вы можете сделать это с помощью JQuery Ajax.

<form action="do_search.php" method="post"/> 
Enter Number:<input type="text" name="roll" id="roll"> 
</form>  
<div id="result"></div> 

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> 
<script type="text/javascript"> 
$("#roll").change(function() { 
     $.post("do_search.php", { roll:$("#roll").val() }) 
    .done(function(data) { 
     $("#result").html(data); 
    }); 
}); 
</script>