PHP & Javascript: Dynamic search with 2 textbox -

is there way have dynamic search 2 textbox filter 2 different fields?

for example have table like:

and have created somethin this:

it works in lastname textbox.

i want when enter lastname same lastnames this:

i want add filter firstname, when enter firstname on firstname textbox example enter pedro in firstname textbox pedro a. dela cruz show up.

this codes

index.php

 <script type="text/javascript"> $(function(){ $(".lname").keyup(function()  {  var value = $(this).val(); var datastring = 'lname='+ value; if(searchlname!='') {     $.ajax({     type: "post",     url: "search.php",     data: datastring,     cache: false,     success: function(html)     {     $("#result").html(html).show();     }     }); }return false;     });  jquery("#result").live("click",function(e){      var $clicked = $(e.target);     var $name = $clicked.find('.name').html();     var decoded = $("<div/>").html($name).text();     $('#searchlname').val(decoded); }); jquery(document).live("click", function(e) {      var $clicked = $(e.target);     if (! $clicked.hasclass("search")){     jquery("#result").fadeout();      } }); $('#searchlname').click(function(){     jquery("#result").fadein(); }); }); </script>      <div class="content">     lastname:     <input type="text" class="lname" id="searchlname" placeholder="search people" /><br />     firstname:     <input type="text" class="search" id="" placeholder="search people" /><br />  <div id="result"> </div> 

search.php

<table width="80%">     <th width="5%">id</th>     <th width="40%">name</th>     <th width="10%">action</th> </table>  <?php $connection = mysql_connect('localhost','root','admin') or die(mysql_error()); $database = mysql_select_db('dbvincent') or die(mysql_error());  if($_post) { $search_name=$_post['lname']; $sql_res=mysql_query("select * `tblpatients` `lname` '%$search_name%' order `patient_id` limit 15");  while($row=mysql_fetch_array($sql_res)) { $id = $row['patient_id'];    $fname = $row['fname']; $mname = $row['mname']; $lname = $row['lname']; ?> <table width="80%">     <td width="5%"><?php echo $id ; ?></td>     <td width="40%"><?php echo $fname.' '.$mname.' '.$lname; ?></td>     <td width="10%"><button formaction="echoid.php?id=<?php echo $id ?>">add</button></td> </table>  <?php 

thanks you.

there cleaner ways of doing this, instead if changing code, i've updated fit needs. i've nagged security aspect , not using old, deprecated mysql_*-functions, rather prepared statements mysqli or pdo.

it needs pointed out in case else comes here later.

first, give both input fields new css class, example: people-search-filter, i'm giving field last name id :

<input type="text" class="lname people-search-filter" id="searchlname" ...  <input type="text" class="search people-search-filter" id="searchfname" ... 

this allowes create same event on both input fields:

$(function(){     // add event on class, both inputs have     $(".people-search-filter").keyup(function() {          // values both inputs, using id's         var lname = $("#searchlname").val();         var fname = $("#searchfname").val();          // add both datastring (and uri encode strings)         var datastring = {lname: lname, fname: fname}         // check @ least 1 has content         if(lname != '' || fname != '')              // ajax query 

in php code, add new parameter query:

$lname = $_post['lname']; $fname = $_post['fname'];  // build search string $search_str = ''; if ($lname) {     $search_str = "where lname '%" . mysql_real_escape_string($lname) . "%'"; }  if ($fname) {     // check if have in search string,      // if do, add , statement.     // if don't have one, we'll add instead.     $search_str .= $search_str ? ' , ' : 'where ';     $search_str .= "fname '%" . mysql_real_escape_string($fname) . "%'"; }  // if neither $lname or $fname contains data, query return patiens $sql_res = mysql_query("select * `tblpatients` {$search_str} order `patient_id` limit 15");  // ... rest of code.