如何创建搜索框来过滤数据

时间:2013-03-20 22:32:54

标签: php jquery mysql database search

首先,我正在使用此网站作为我正在尝试做的模板,除了我在其上添加一个搜索框:http://www.dougv.com/demo/jquery_sort_records/js.php(由于参考阻止,您应该复制并粘贴链接查看它。否则你将遇到403禁止错误)

我想创建一个简单的搜索框,搜索某个属性并显示找到的任何结果(基本上是一个过滤器)。这是我到目前为止代码的一部分。 到目前为止,该表似乎很好,但我想添加一个搜索第一个名称属性的搜索框。

任何帮助?

<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.min.js"></script>
<script type="text/javascript">
            $(document).ready(function() {
                $("#sortedtable").tablesorter({ sortlist: [0,0] });
            });
        </script>

</head>
<body>
<?php
            if(!$link = mysql_connect("database_server", "user_name", "password")) {
                echo "Cannot connect to db server";
            }
            elseif(!mysql_select_db("database_name")) {
                echo "Cannot select database";
            }
            else {
                if(!$rs = mysql_query("SELECT * FROM table")) {
                    echo "Cannot parse query";
                }
                elseif(mysql_num_rows($rs) == 0) {
                    echo "No records found";
                }
                else {
                    echo "<table id=\"sortedtable\" class=\"bordered\" cellspacing=\"0\">\n";
                    echo "<thead>\n<tr>";
                    echo "<th>Record ID</th>";
                    echo "<th>First Name</th>";
                    echo "<th>Last Name</th>";
                    echo "<th>Birthday</th>";
                    echo "<th>Department</th>";
                    echo "</tr>\n</thead>\n";
                    while($row = mysql_fetch_array($rs)) {
                        echo "<tr><td>$row[person_id]</td><td>$row[person_name]</td><td>$row[person_surname]</td><td>$row[person_birthdate]</td><td>$row[person_department]</td></tr>\n";
                    }
                    echo "</table><br />\n";
                }
            }
?>

<form name="search_form" method="POST" action="js.php">
<font face="Calibri"> </font>
Search: <input type="text" name="search_b" value="" />
<input type="submit" name="search" value="Search for your term..."> </input>
</form>

1 个答案:

答案 0 :(得分:0)

首先我建议你将数组访问括在这样的字符串中:`“some tring {$ array ['key']}”因此你不会遇到直接在你的字符串中访问arrayfields的任何问题。

但现在应该这样做:

<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#sortedtable").tablesorter({ sortlist: [0,0] });
    });
</script>

</head>
<body>
    <?php
    if (!$link = mysql_connect("database_server", "user_name", "password")) {
        echo "Cannot connect to db server";
    } elseif (!mysql_select_db("database_name")) {
        echo "Cannot select database";
    } else {
        $searchString = "";
        if(!empty($_POST['search_b'])){
            $searchString = "WHERE user_name LIKE '%{$_POST['search_b']}%'";
        }
        if (!$rs = mysql_query("SELECT * FROM table $searchString")) {
            echo "Cannot parse query";
        } elseif (mysql_num_rows($rs) == 0) {
            echo "No records found";
        } else {
            echo "<table id=\"sortedtable\" class=\"bordered\" cellspacing=\"0\">\n";
            echo "<thead>\n<tr>";
            echo "<th>Record ID</th>";
            echo "<th>First Name</th>";
            echo "<th>Last Name</th>";
            echo "<th>Birthday</th>";
            echo "<th>Department</th>";
            echo "</tr>\n</thead>\n";
            while ($row = mysql_fetch_array($rs)) {
                echo "<tr><td>{$row[person_id]}</td><td>{$row[person_name]}</td><td>{$row[person_surname]}</td><td>{$row[person_birthdate]}</td><td>{$row[person_department]}</td></tr>\n";
            }
            echo "</table><br />\n";
        }
    }
    ?>

    <form name="search_form" method="POST" action="js.php">
        <font face="Calibri"> </font>
        Search: <input type="text" name="search_b" value="" />
        <input type="submit" name="search" value="Search for your term..."> </input>
    </form>