<!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. Android学习笔记（二十）——自定义内容提供器

    //此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! 如果我们想要实现跨程序共享数据的功能,官方推荐的方式就是使用内容提供器,可以通过新建一个类去继承 Conten ...

  2. 面向对象的 CSS (OOCSS)

    原文链接:来自smashing magazine 译文 你是否听说过一个词语叫“内容就是王道”?作为一个 Web 开发者,我们的工作与内容创作有着频繁的联系.这是一条经常被引用,并且正确地解释了什么因 ...

  3. Exploiting the Circulant Structure of Tracking-by-Detection with Kernels（二）

    之前给导师汇报时,主要是论文涉及公式的一些推导

  4. Python 学习笔记二

    笔记二 :print 以及基本文件操作 笔记一已取消置顶链接地址 http://www.cnblogs.com/dzzy/p/5140899.html 暑假只是快速过了一遍python ,现在起开始仔 ...

  5. fzu2188 状压dp

    G - Simple String Problem Time Limit:2000MS     Memory Limit:32768KB     64bit IO Format:%I64d & ...

  6. linux文件远程传输客户端shell脚本与分布式客户机时间同步脚本

    #!/bin/bash # 将代码和脚本传送至worker节点 # 改变当前工作目录 cd ${AMAZONCRAWLER_HOME} #读取worker节点ip列表 i= while read li ...

  7. django的ajax对应前端的瀑布流方法

    html {% load xx %} <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  8. Ubuntu 16.04播放器Rhythmbox乱码解决

    使用Rhythmbox进行音乐播放的时候,歌曲名称专辑歌手名称都出现乱码,查看了网上很多教程,要不就是将音频转码,要不就是修改用户环境编码配置.前一种方法对音频有改动,后一种可能无效还有可能会影响系统 ...

  9. Jenkins 报错：(pending—Waiting for next available executor)

    系统管理-管理节点,刷新状态

  10. MyEclipse 15 集成SVN

    一.在线更新 地址:http://subclipse.tigris.org/update_1.8.x 二.手动安装