javascript - PHP 和 JavaScript : Dynamic search with 2 textbox

Question

有没有办法使用 2 个文本框进行动态搜索来过滤 2 个不同的字段？

例如我有一个像这样的表:

我创建了这样的东西:

它已经在 LASTNAME 文本框中起作用。

我想要的是，当我输入具有相同姓氏的姓氏时，如下所示:

我想按名字添加另一个过滤器，这样当我在 FIRSTNAME 文本框示例中输入名字时，我在 FIRSTNAME 文本框中输入 PEDRO 时，只会显示 PEDRO A. Dela Cruz。

这是我的代码

索引.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>

搜索.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

谢谢你。

Answer 1

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.

首先，我会给两个输入字段一个新的额外 css 类，例如:people-search-filter，我还为姓氏字段提供了 ID:

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

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

这允许我们在两个输入字段上创建相同的事件:

$(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: lname, fname: fname}
        // Check that at least one has any content
        if(lname != '' || fname != '')

            // Your ajax query

在 PHP 代码中，您只需将新参数添加到查询中即可:

$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.