<!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 5071 Chat(2014鞍山赛区现场赛B题)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5071 解题报告:一个管理聊天窗口的程序,一共有八种操作,然后要注意的就是Top操作只是把编号为u的窗口 ...

  2. [Asp.net MVC]Asp.net MVC5系列——添加视图

    目录 系列文章 概述 添加视图 总结 系列文章 [Asp.net MVC]Asp.net MVC5系列——第一个项目 概述 在这一部分我们添加一个新的控制器HelloWorldController类, ...

  3. WC总结

    去了人生中第一次全国WC,在四川绵阳南山中学举行,去了这么一次,感受颇多,不忍心白白地让时间流逝,于是写篇随笔记录一下. 全程,共计8天. [第1天] 签到,拿餐票,看了看讲义,觉得要狗带. 开营仪式 ...

  4. Xcode 中的黄色文件夹/蓝色文件夹

    蓝色.黄色首先是和你导入文件夹时的勾选项目有关系: 黄色:-->group 蓝色:--> folder 在group中的.m/.h文件,#import "xxxxx.h" ...

  5. 再谈Weiphp公众平台开发——1、增加插件

    去年开始接触基于Weiphp的公众平台开发,一直没时间好好整理一下. 下面开始讲解第一个自定义weiphp插件:MyHello的开发流程. 1.插件创建.在weiphp管理后台依次点击“插件管理-&g ...

  6. django 的文件上传

    template html(模板文件): <form enctype="multipart/form-data" method="POST" action ...

  7. phpcms常用方法简介

    function thumb() /** * 生成缩略图函数 * @param $imgurl 图片路径 * @param $width 缩略图宽度 * @param $height 缩略图高度 * ...

  8. How to mount a NFS share?

    Assume you have a NFS share /data/shares/music, at server: 192.168.1.5 You can mount the NFS share f ...

  9. 不懂点CAP理论，你好意思说你是做分布式的吗？

  10. Wijmo 5 与Breeze 的组合，及与METRONIC 的集成

    1.Wijmo 5  是支持ANGULARJS 的HTML5 控件   http://wijmo.gcpowertools.com.cn/ 官方试用版  C1Wijmo-Eval_5.20151.42 ...