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. php之Cookie与Session详解

    Cookie管理 Cookie是在HTTP协议下,通过服务器或脚本语言可以维护客户浏览器上信息的一种方式,Cookie的使用很普遍,许多提供个人化服务的网站都是利用Cookie来区别不同用户,以显示与 ...

  2. Android EditText 取消复制粘贴功能,取消横向全屏编辑功能(一)

    在做一些安全性的软件时候常常要考虑取消 EditText 上的复制粘贴功能以确保安全性.下面就记录了这个方法: 首先在API-11以下的版本很简单,只需要在Xml布局文件或者用代码把长按属性设置成fa ...

  3. grep 和 perl多个条件匹配

    grep和perl多个条件匹配使用‘|’作为分割符号 grep -E 'abc|def' perl if(/abc|def/)

  4. a 标签的四个伪类

    link        有链接属性时visited    链接地址已被访问过active     被用户激活(在鼠标点击与释放之间发生的事件)hover      其鼠标悬停 <!DOCTYPE ...

  5. php 垃圾回收机制----写时复制和引用计数

    PHP使用引用计数和写时复制来管理内存.写时复制保证了变量间复制值不浪费内存,引用计数保证了当变量不再需要时,将内存释放给操作系统. 要理解PHP内存管理,首先要理解一个概念----符号表. 符号表的 ...

  6. webstrom 常用快捷键

    最近在学习javascript,同时发现了一款非常好用的IDE webstrom 现在记录改IDE的快捷键 1. ctrl + shift + n: 打开工程中的文件,目的是打开当前工程下任意目录的文 ...

  7. 矩阵转置 O(1)空间

    题目:用O(1)的空间实现矩阵的转置 为了方便,使用一维数组来分析.所谓矩阵转置,行变列,列变行.在转置的过程中,有的元素位置是不变的:对于变化位置的元素,要求O(1)空间完成,那么这些位置的变化一定 ...

  8. structs常用的Action

    今天座右铭-----谦虚使人进步,骄傲使人落后. 除了基本的Action之外,structs还提供几个其他的类型Action,下面就简单的说一下: 1.DispatchAction:能同时完成多个Ac ...

  9. 京东区块排版负margin用法

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. Python学习入门基础教程(learning Python)--8.3 字典常用的方法函数介绍

    本节的主要讨论内容是有关dict字典的一些常用的方法函数的使用和范例展示. 1. clear清除字典数据 语法结构如下: dict_obj.clear() 示例代码如下: dict1 = {'web' ...