<!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开发——UI进阶篇（四）tableView的全局刷新，局部刷新，左滑操作，左滑出现更多按钮，进入编辑模式，批量删除，自定义批量删除

    首先创建项目,在storyboard如下布局控件,设置好约束 然后创建cell模型类XMGWineCell数据模型类XMGWine创建UITableView,设置数据源协议,实现数据源方法懒加载数据这 ...

  2. BZOJ3052——糖果公园

    0.题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3052 1.题目大意:给定一颗n个点的无根树,每个点有一个颜色,要进行q次操作,有两种操 ...

  3. 使用 Github Pages 发布你的项目文档

    导读 你可能比较熟悉如何用 Github Pages 来分享你的工作,又或许你看过一堂教你建立你的第一个 Github Pages 网站的教程.近期 Github Pages 的改进使得从不同的数据源 ...

  4. .assetbundle 和.unity3d 好处

    .assetbundle 资源文件 .unity3D  场景文件 xml.json 静态存储和 还原 AssetBuddle 优点:减小压缩包.资源更新.分开安装包和数据包.AssetBuddle加密 ...

  5. hiberante学习笔记

    1.配置文件(hibernate映射文件): 让hibernate知道该怎么样去load,store持久化对象: 1.1 数据库忌讳的字段名 1) User 2) index 2.数据库表中一对多,多 ...

  6. Raspberry Pi 配置笔记二

    配置源 http://blog.chinaunix.net/uid-21658993-id-4702322.html deb http://ipv4.mirrors.ustc.edu.cn/raspb ...

  7. 18 TaskScheduler任务调度器抽象基类——Live555源码阅读(一)任务调度相关类

    这是Live555源码阅读的第二部分,包括了任务调度相关的三个类.任务调度是Live555源码中很重要的部分. 本文由乌合之众 lym瞎编,欢迎转载 http://www.cnblogs.com/ol ...

  8. SX学SX内容 笔记?

    某帖子笔记1 主要还是从三体吧某精品贴里看来的... 集合论 集合就是一堆东西...满足 1) 集合中的元素互异(即每种只有一个) 2) 集合中的元素无序(不是一个数组,集合中的元素没有显然的排序法则 ...

  9. Python sorted函数对列表排序

    http://jingyan.baidu.com/article/f3ad7d0ffe8e1409c2345b48.html http://www.cnblogs.com/100thMountain/ ...

  10. PowerDesigner V16.5 安装文件

    之前在网上找个假的,只能看,不能创建自己的DB; 或者 不能破解的,比较伤脑筋. 偶在这里提供一个 可长期使用的版本. PowerDesigner165_破解文件.rar    链接:http://p ...