无需点击按钮即可搜索

时间:2014-08-08 14:05:46

标签: php textbox

我需要帮助。我想在一个文本框中输入一个或多个字母,然后我需要在没有点击任何按钮的情况下在表格中显示所有这些字母的名字,我该怎么做?

这是我的代码

<html>

    <body>
Name:    <input type="text" name="text2" id="text2">
        <div id="table-scroll">
        <table cellpadding="8" cellspacing="5" id="fo">
         <thead>
           <tr>
           <th>Patient Number</th>
           <th>Patient Name</th>
            </tr>
            </thead>
           <tbody cellpadding="8">
            <?php 
             include( 'connect.php');
              $term=$ _POST[ "text2"];
              $sql="SELECT * FROM tblnpatient WHERE pname LIKE '%$term%'" ;
              $result=m ysql_query($sql); 
              while($row=m ysql_fetch_array($result)) { 
                echo '<tr class="record">'; 
                echo '<td>'.$row[ 'pname']. '</td>';
                echo '<td>'.$row[ 'pnum']. '</td>'; 
              } 
        ?>
 </tbody>

</html>

1 个答案:

答案 0 :(得分:1)

您正在寻找的是jQuery自动完成功能。

看一下这篇文章:http://jqueryui.com/autocomplete/

这是你实现它的方式:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>jQuery UI Autocomplete - Default functionality</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css">
        <script>
            $(function() {
            var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
            ];
            $( "#tags" ).autocomplete({
            source: availableTags
            });
            });
        </script>
    </head>
    <body>
        <div class="ui-widget">
            <label for="tags">Tags: </label>
            <input id="tags">
        </div>
    </body>
</html>

所以根据您的需要,您需要查询您的数据库,选择您想要的所有值&#34;自动建议/完成&#34;并将其输出到js数组中。