<!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=utf-8" />

<title>无标题文档</title>

<script src="jquery-1.11.2.min.js"></script>

<style type="text/css">

*{ margin:0px auto; padding:0px}

#xianshi{ width:300px; margin-top:20px}

#txt{ width:300px}

#name{ width:296px}

#list{ width:300x; position:absolute; z-index:3;}

.sj{ width:298px; height:19px; border:1px solid #0FF; border-top:0px; background-color:#FFF;}

.sj:hover{ cursor:pointer}

#fg{ margin:30px 0px 20px 0px;}

</style>

</head>

<body>

<div id="xianshi">

    <div id="txt">

        <input type="text" id="name" />

    </div>

    <div id="list">

    </div>

</div>

<hr id="fg" />

<table id="tb" width="100%" border="1" cellpadding="0" cellspacing="0">

</table>

</body>

<script type="text/javascript">

$(document).ready(function(e) {

    xianshi();

    //输入内容显示下拉

    $("#name").keyup(function(){

        var key=$(this).val();

        $.ajax({

            async:false,

            url:"AJAX5chuli.php",

            data:{key:key,bs:0},

            type:"POST",

            dataType:"TEXT",

            success: function(data){

                if(data.trim()=="")

                {

                    $("#list").html("");

                }

                else

                {

                    var shuju=data.trim().split("|");

                    var str="";

                    for(var i=0;i<shuju.length;i++)

                    {

                        shuju[i];    

                        str=str+"<div class='sj'>"+shuju[i]+"</div>"

                    }

                    $("#list").html(str);

                    $(".sj").css("display","block");

                    }

            }

            })

        //鼠标放上显示背景色

        $(".sj").mouseover(function(){

            $(".sj").css("background-color","#FFF");

            $(this).css("background-color","#0F0");

        });

        //鼠标离开去掉背景色

        $(".sj").mouseout(function(){

            $(this).css("background-color","#FFF");

        });

        //点击将选中项的值放到文本框

        $(".sj").click(function(){

            var txt=$(this).text();

            $("#name").val(txt);

            $(".sj").css("display","none");

            xianshi();

            })

        xianshi();

        })

});

//查询所有数据显示表格

function xianshi()

{

    var key=$("#name").val();    

    $.ajax({

            url:"AJAX5chuli.php",

            data:{key:key,bs:1},

            type:"POST",

            dataType:"TEXT",

            success: function(data){

                var hang=data.trim().split("|");

                var str="<tr><td>汽车名称</td><td>系列</td><td>上市时间</td><td>油耗</td><td>价格</td></tr>";

                for(var i=0;i<hang.length;i++)

                {

                    var lie=hang[i].split("^");    

                    str=str+"<tr><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td>"+lie[4]+"</td><td>"+lie[7]+"</td></tr>";

                }

                $("#tb").html(str);

                }

    })

}

</script>

</html>
<?php

include("DBDA.php");

$db=new DBDA();

$bs=$_POST["bs"];

$key=$_POST["key"];

if($bs==1)

{

    $sql="select * from car where name like '%{$key}%'";

    echo $db->StrQuery($sql);

}

else

{

    if($key=="")

    {

        echo "";

    }

    else

    {

        $sql="select name from car where name like '%{$key}%'";

        echo $db->StrQuery($sql);

    };

};

AJAX 搜索自动显示练习的更多相关文章

  1. VS2013 help viewer搜索结果显示源码以及桌面独立运行help viewer

    安装好VS2013后,启动help viewer2.1在搜索栏中搜搜时结果会出现HTML源码. 要解决这个问题先来看看MINE,即Multipurpose Internet Mail Extensio ...

  2. 【高德地图API】从零开始学高德JS API（四）搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索

    原文:[高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索 摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公 ...

  3. [LeetCode] Design Search Autocomplete System 设计搜索自动补全系统

    Design a search autocomplete system for a search engine. Users may input a sentence (at least one wo ...

  4. Android BLE与终端通信（二）——Android Bluetooth基础科普以及搜索蓝牙设备显示列表

    Android BLE与终端通信(二)--Android Bluetooth基础搜索蓝牙设备显示列表 摘要 第一篇算是个热身,这一片开始来写些硬菜了,这篇就是实际和蓝牙打交道了,所以要用到真机调试哟, ...

  5. IDEA设置取消自动显示参数提示

    IDEA设置取消自动显示参数提示 最近在使用IDEA的过程中,发现方法中一直显示形参名的提示,无法选中,也无法删除,基于不同人的使用习惯不同,有的人不喜欢这种提示,我也在网上寻找各种解决方案,由于搜索 ...

  6. 【搜索引擎】 PostgreSQL 10 实时全文检索和分词、相似搜索、模糊匹配实现类似Google搜索自动提示

    需求分析 要通过PostgreSQL实现类似Google搜索自动提示的功能,例如要实现一个查询海量数据中的商品名字,每次输入就提示用户各种相关搜索选项,例如淘宝.京东等电商查询 思路 这个功能可以用 ...

  7. [LeetCode] 642. Design Search Autocomplete System 设计搜索自动补全系统

    Design a search autocomplete system for a search engine. Users may input a sentence (at least one wo ...

  8. StringBoot整合ELK实现日志收集和搜索自动补全功能(详细图文教程)

    @ 目录 StringBoot整合ELK实现日志收集和搜索自动补全功能(详细图文教程) 一.下载ELK的安装包上传并解压 1.Elasticsearch下载 2.Logstash下载 3.Kibana ...

  9. Axure RP 8 实现 圆角文本框 圆角带筛选的下拉列表框 可自动显示滚动条

    刚开始用Axure 会发现 Axure 元件库并不是很齐全,很多元件需要自己想办法解决 或者去网上去找.其实个人建议网上有现成的元件可以就下载就不必花时间去折腾.除非你也想练练手,原型这种东西除非高保 ...

随机推荐

  1. HDU 1086You can Solve a Geometry Problem too(判断两条选段是否有交点）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1086 判断两条线段是否有交点,我用的是跨立实验法: 两条线段分别是A1到B1,A2到B2,很显然,如果 ...

  2. GZIP压缩

     (这些文章都是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com)         zip压缩文件听说过,GZIP对我可是新鲜词儿,这个世界好复杂,压缩是无处不 ...

  3. Android_bug之Default Activity not found

    在运行自己修改默认的MainActivety,运行自己的Mainactivety时,碰到这个问题Could not identify launch activity: Default Activity ...

  4. 一个完整的Http请求

    一个完整的http请求,通常有以下7点: 1.建立tcp连接 2.web浏览器web服务器发送请求命令 3.web浏览器发送请求头信息 4.web服务器应答 5.web服务器发送应答信息 6.web服 ...

  5. Python读取中文txt文件错误：UnicodeEncodeError: 'gbk' codec can't encode character

    with open(file,'r') as f: line=f.readline() i=1 while line: line=line.decode('utf-8') line=f.readlin ...

  6. Zebra_Form Packages: Zebra_Form Controls Generic XSS_Clean Classes: Zebra_Form_Control Class: Zebra_Form_Control

    http://stefangabos.ro/wp-content/docs/Zebra_Form/Generic/Zebra_Form_Control.html#methodset_rule

  7. 循环(loop), 递归(recursion), 遍历(traversal), 迭代(iterate)的区别

    表示“重复”这个含义的词有很多, 比如循环(loop), 递归(recursion), 遍历(traversal), 迭代(iterate). 循环算是最基础的概念, 凡是重复执行一段代码, 都可以称 ...

  8. C# nullable<T> 用法小结

    今天在园子里看到一个关于C#中对于可空类型的描述的帖子,感觉不错于是自己写了个小例子尝试下. 在C#中,对于可空类型描述为:Nullable<T>, 它表示该类型是可以为空的一个类型.它被 ...

  9. pypi 国内镜像 及修改全局方法

    PyPi的官方网站为https://pypi.python.org,有时访问中会很慢,使用pip命令安装带其他依赖包的安装包,会经常失败.解决办法,使用国内PyPi镜像网站,修改pip的源. 网上搜索 ...

  10. selenium源码分析-webdriver(二)

    最近比较空闲就仔细看了一下Selenium的源码,因为主要是使用WebDriver所以重点关注了一下WebDriver的工作原理.在前一篇blog里已经解释过了WebDriver与之前Selenium ...