Vincent Von Nino Dapiton Vincent Von Nino Dapiton - 17 days ago 4
Ajax Question

PHP & Javascript: Dynamic search with 2 textbox

Is there any way to have a dynamic search with 2 textbox to filter 2 different fields?

for example i have a table like:

enter image description here

and i have created somethin like this:
enter image description here

it already works in the LASTNAME textbox.

i want is that when i enter a lastname with same lastnames like this:
enter image description here

i want to add another filter by firstname, so that when i enter a firstname on the FIRSTNAME textbox example i enter PEDRO in the FIRSTNAME textbox only PEDRO A. Dela Cruz will show up.

This is my 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 for people" /><br />
Firstname:
<input type="text" class="search" id="" placeholder="Search for 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 * FROM `tblpatients` WHERE `lname` LIKE '%$search_name%' order by `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.

Answer

There are cleaner ways of doing this, but instead if changing all your code, I've updated it to fit your needs. I've already nagged about the security aspect and about not using those old, deprecated mysql_*-functions, but rather Prepared Statements with MySQLi or PDO.

It just needs to be pointed out in case someone else comes here later.

First, I would give both input fields a new extra css class, example: people-search-filter, I'm also giving the field for last name an ID :

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

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

This allowes us the create the same event on both input fields:

$(function(){
    // We add the event on the class, which both inputs have
    $(".people-search-filter").keyup(function() { 
        // Now we get the values from both inputs, using their ID's
        var lname = $("#searchlname").val();
        var fname = $("#searchfname").val();

        // Add both to the dataString (and URI encode the strings)
        var dataString = 'lname=' + encodeURIComponent(lname) + '&fname=' + encodeURIComponent(fname);
        // Check that at least one has any content
        if(lname != '' || fname != '')

            // Your ajax query

In your PHP code, you just add the new parameter into your query:

$lname = $_POST['lname'];
$fname = $_POST['fname'];

// Now we will build the search string
$search_str = '';
if ($lname) {
    $search_str = "WHERE lname LIKE '%" . mysql_real_escape_string($lname) . "%";
}

if ($fname) {
    // Check if we have something in the search string, 
    // if we do, add an AND to the statement.
    // If we don't have one, we'll add the WHERE instead.
    $search_str .= $search_str ? ' AND ' : 'WHERE ';
    $search_str .= "fname LIKE '%" . mysql_real_escape_string($fname) . "%";
}

// If neither $lname or $fname contains any data, the query will return all patiens
$sql_res = mysql_query("SELECT * FROM `tblpatients` {$search_str} order by `patient_id` LIMIT 15");

// ... the rest of your code.
Comments