dropbox_index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>主搜索引擎下拉框自动显示数据</title>

</head>

<script src="js/dropbox.js"  type="text/javascript"></script>

<link  href="css/dropbox.css" type="text/css" rel="stylesheet"/>

<body>

<form action="" method="post" enctype="multipart/form-data">

                <input name="txt" id="txt" class="txt" type="text" onkeyup ="showHint(this.value)"  />

                <input type="submit" class="btn" name="submit" value="Upload" /><br />

                <span id="txtHint" class="file-box"></span>

</form>

</body>

</html>

dropbox.js    ajax

        var xmlHttp

        function showHint(str)

        {

            if (str.length==0)

            {

              document.getElementById("txtHint").innerHTML=""

              return

            }

            xmlHttp=GetXmlHttpObject()

            if (xmlHttp==null)

              {

                  alert ("Browser does not support HTTP Request")

                  return

              }

            var url="responsepage.php"

            url=url+"?q="+str

            url=url+"&sid="+Math.random()

            xmlHttp.onreadystatechange=stateChanged

            xmlHttp.open("GET",url,true)

            xmlHttp.send(null)

        } 

        //设置回调函数

        function stateChanged()

        {

            if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

             {

                document.getElementById("txtHint").innerHTML=xmlHttp.responseText

             }

        }

        function GetXmlHttpObject()

        {

            var xmlHttp=null;

            try

             {

                 // Firefox, Opera 8.0+, Safari

                 xmlHttp=new XMLHttpRequest();

            }

            catch (e)

            {

                 // Internet Explorer

                 try

                  {

                    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

                  }

                 catch (e)

                  {

                    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

                  }

             }

            return xmlHttp;

        }

dropbox.css

.txt{ height:22px; border:1px solid #cdcdcd; width:220px;border-right:none;}

.btn{ background-color:#FFF; border:1px solid #CDCDCD;height:26px; width:70px;}

responsepage.php

<?php

    //get the q parameter from URL

    $q=$_GET["q"];

    //全部小写化

    $q=strtolower($q);

    //非空验证

    if(isset($q) && $q != '')

    {

        $con = mysql_connect("localhost","root","lifu");

        if(!$con)

        {

            die('Could not connect: ' .mysql_error());

        }

        mysql_select_db("my_db",$con);

        $sql = "select * from persons";

        //$sql="SELECT FirstName FROM  Persons where Firstname like  '%$q%'";

        $result =mysql_query($sql,$con);

        while($row = mysql_fetch_array($result))

         {

              //匹配判断

              if(stristr(strtolower($row['FirstName']),$q))

             {

                  //echo "-----------------Persons-----------------";

                 echo /* "firstname:" .*/ $row['FirstName'] . "<br />";

                 //echo "lastname:" . $row['LastName'] . "<br />";

                 //echo "age:" . $row['Age'] . "<br />";

              }

              //echo  $row['FirstName'] . "<br />";

         }

        mysql_close($con);

     }

?>

数据库：

aaarticlea/png;base64,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" alt="" />

结果：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAATgAAABRCAIAAADJkS0bAAADkklEQVR4nO3dO5aiQBSAYXZk4naIWI0BeyFhGZMZuRkmkEe9qdICubf/L5qGcuw+p/5TgIrNBODyml//AgD2ESogAKECAhAqIIAb6j/gqtTP1bJQv68fOIGyuUqo0EnZXCVU6KRsrhIqdFI2VwkVOimbq4QKnZTNVUKFTsrmKqFCJ2VzlVCh05Fzdeyae/869eGECp0K56oTT7olQgUqIdT1yWbdWPaUwAkqhTp2zb3v58m+jDAGv/p7Y+800rDrMLefFOqrvy9P9ervpIrrqRfqUtvYNWa9y9559hv/3Gx1GMmct6JacVIqrqjmimosld1obLTiNH/wFk+rktNCtdZ2jn5xRQeEutZmhLo9yNzrLZ5u0ueFSpu4tPJQjTm9HaiWr6jBJn+zoloH3NOr7764AgYcovQVCnfpnH8wNm8FWueo28D3XudsNHw2+4urvl9dqQaOUf5S4nYB11knvYmevuprbOs6u3NvY6U/h9dRIVWlufrlS6bVECp0IlRAAEIFBFA2VwkVOimbq4QKnZTN1eJQgWtSP1cLQgVwQYQKCECogACECghAqIAAgVCfj5vzYdTb45n1nz0ft6Zph8q/IoBYqEabQ5vb6tA2hAocICPU/AAJFThGVqjuIe3QbofF82b3eHkbHRi8bm6HeS91AynZK+q6wVo27TXUX1Hjg+dCc09/gT9tP9T3Whku01ls3Z2pwflnvgByrvq6F5a8NXMZ4OxNDuZ8FsiXdei7MU84/TPSUKixwYQK5Psg1PjxaiDU6GBCBfIVhloWX2owoQL5SkN1ri1N09BuP3iPTAwmVCBfcaiTc7XJbm3dZccbfx21yh8BaMeb8gEBCBUQgFABAQgVEIBQAQEIFRCAUAEBCBUQgFABAT4LdffNSwBqSoXqfDDV/QQ4oQJniYT6btROcWjXDYQKnCoYavpTpxOhAicLhLqbafSOot4x8jLO2Bs4gA7vBbDyQ83o1A01eq/B5SzX2rc+Lr0XwMoLNetrKaxQE/cadD84bj8wvRfAaj9U69rvXJFZVOpeg+lbBO/cQBjAIv/Q18zKCzVyr8H0t2N8/t0ZwB/jhxo7/kyFGlsFCRWoIvTyTDiXWKipUgkVqCL8hof5vNT/GplQqIl7DRIqUEXiLYTeyaf/+uhkbcgYR6jAJ/j0DCAAoQICECogAKECAhAqIAChAgIQKiAAoQICECogAKECAhAqIMB/MmJ5+x0RcJ4AAAAASUVORK5CYII=" alt="" />

php随笔2-php+ajax 实现输入读取数据库显示匹配信息的更多相关文章

  1. spring读取数据库的配置信息（url、username、password）时的<bean>PropertyPlaceholderConfigurer的用法

    用法1: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://w ...

  2. JSP 实现 之 读取数据库显示图片

    用JSP从数据库中读取图片并显示在网页上 环境mysql+tomcat: <1>先在mysql下建立如下的table. 并insert图像. mysql.sql文件如下: ) unsign ...

  3. ajax处理级联访问数据库显示

    首先创建简单的html页面,写出如下代码: 静态页相关代码: js代码:

  4. JMeter接口测试-循环读取库的用户信息

    前言 如何实现循环读取数据库的用户信息,并传递到下一个登录请求呢,下面我们一起来学习吧!在之前我们已经学会了利用JMeter连接数据库了,具体操作可以看我之前的随笔JMeter接口测试-JDBC测试 ...

  5. C# 保存PictureBox中的图片到数据库，并从数据库读取图片显示到PictrueBox，解决报错 “无效参数”

    下面是两段关键代码: /// <summary> /// 将一张图片转换为字节 /// </summary> /// <param name="img" ...

  6. android键盘输入读取

    android键盘输入读取  监控android键盘输入方式有两种,一种在java层实现,重写onKeyDown和onKeyUp方法.另一种是在jni层实现,监控/dev/input/event0键盘 ...

  7. VS2010中使用Jquery调用Wcf服务读取数据库记录

    VS2010中使用Jquery调用Wcf服务读取数据库记录 开发环境:Window Servere 2008 +SQL SERVE 2008 R2+ IIS7 +VS2010+Jquery1.3.2 ...

  8. 如何用ajax写分页查询（以留言信息为例）-----2017-05-17

    要写分页,首先你得清楚,一页你想显示多少条信息?如何计算总共显示的页数? 先说一下思路: (1)从数据库读取数据,以chenai表为例,读取所有留言信息.并能够实现输入发送者,可以查询该发送者的留言总 ...

  9. 《python核心编程》笔记——文件的创建、读取和显示

    创建文件(makeTextFile.py)脚本提醒用户输入一个尚不存在的文件名,然后由用户输入文件每一行,最后将所有文本写入文本文件 #!/usr/bin/env python 'makeTextFi ...

随机推荐

  1. asp.net session的原理

    session,会话,指的就是用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间. A用户和C服务器建立连接时所处的Session同B用户和C服务器建立连 ...

  2. MVC 5 + EF 6

    (一) ??运算符 C#中两个问号(“?”)的作用是判断“?”左边的对象是否为null,如果不为null则使用“?”左边的对象,如果为null则使用“?”右边的对象. (二)VS安装Entity Fr ...

  3. poj 1450 Gridland

    Gridland Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Su ...

  4. 记一次phpStudy apache启动后自动关闭 修改过程

    第一种可能原因:路径包含中文 .添加站点 2.重启服务 3.遇见问题 apache 刚启动,1秒钟中后就停止 4.解决问题 发现是自己添加的网站中包含中文路径的问题,建议不要在自己的网站目录下包含中文 ...

  5. 【转】commons-fileupload-1.2.1.jar和commons-io-1.3.2.jar实现文件上传

    总共:一个upload.jsp,一个FileUploadServlet.java,两个文件:ImagesUploaded,ImagesUploadTemp, 一个web.xml,两个架包:common ...

  6. 浏览器加载模式：window.onload和$(document).ready()的区别(详解)

    jQuery库文件是在body元素之前加载的,必须等待所有的DOM元素加载后,延迟支持DOM操作,否则就无法获取到. 在延迟等待加载,JavaScript提供了一个事件为load,方法如下: wind ...

  7. LInux下安装jdk与环境配置与Webstorm的安装

    个人比较喜欢Webstorm这款软件,但是毕设要做的网站打算在Linux下做,所以就想在Linux上装个Webstorm.刚开始下载好后运行提示没有装jdk,然后apt-get install来安装还 ...

  8. jQuery 的.data()方法

    jQuery文档对.data()方法的描述: As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to ...

  9. asp.net mvc4中model与Model的区别

    @model模型定义 使用@model关键字可以定义一个Action里所对应的一个模型(经常可以叫他实体类), 其实是对动态变量进行实例化,这样就可以直接在cshtml文件中调用“Model”变量. ...

  10. Oracle EBS-SQL (BOM-8):检查物料属性(无采购员).sql

    select       msi.segment1                                  物料编码,       msi.DESCRIPTION               ...