<!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. iOS开发——高级篇——Objective-C特性：Runtime

    Objective-C是基于C语言加入了面向对象特性和消息转发机制的动态语言,这意味着它不仅需要一个编译器,还需要Runtime系统来动态创建类和对象,进行消息发送和转发.下面通过分析Apple开源的 ...

  2. [BZOJ3572][Hnoi2014]世界树

    [BZOJ3572][Hnoi2014]世界树 试题描述 世界树是一棵无比巨大的树,它伸出的枝干构成了整个世界.在这里,生存着各种各样的种族和生灵,他们共同信奉着绝对公正公平的女神艾莉森,在他们的信条 ...

  3. [转载]Jquery mobile 新手问题总汇

    原文链接:http://www.wglong.com/main/artical!details?id=4 此文章将会持续更新,主要收录一些新手比较常见的问题. 欢迎 向我推荐比较典型的常见问题,我会记 ...

  4. 多版本python共存

    当不同版本python之间相互不能兼容时,可以使用virtualenv创建不同版本python的虚拟环境 当没有指定python解释器时(如下-p 即为指定的python版本),将使用默认的全局pyt ...

  5. ARPACK在window visual Studio的安装配置

    ARPACK是一个求解大规模稠密/稀疏矩阵问题的库,最近在做特征值问题时用到.ARPACK这库相当古老,最早是RICE的一帮人弄的.LAPACK也差不多,貌似是美帝某个.gov发起的.这俩源代码是Fo ...

  6. class.equals

    public boolean equals(Object obj) 1.自身和自身应该是equals的. X.equals(x) return ture2.如果A等于B, 那么B也就等于A . X.e ...

  7. discuz后台开发常用函数

    showsetting()表单显示 返回值:无 参数: $setname - 指定输出标题,如:setting_basic_bbname, 自动匹配描述文字为:setting_basic_bbname ...

  8. 什么情况下可以不写PHP的结束标签“?>”

    我们经常看到有些PHP文件中的代码是只有开始标签,而没有结束标签的,那么什么情况下可以不写这个结束标签,而什么情况下必须写?先来看2个例子: 下面的代码正常运行: <?php echo 1234 ...

  9. php 使用redis锁限制并发访问类

    1.并发访问限制问题 对于一些需要限制同一个用户并发访问的场景,如果用户并发请求多次,而服务器处理没有加锁限制,用户则可以多次请求成功. 例如换领优惠券,如果用户同一时间并发提交换领码,在没有加锁限制 ...

  10. Majority Number I & || && |||

    Majority Number Given an array of integers, the majority number is the number that occurs more than ...