AJAX 搜索自动显示练习

<!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);
    };
};

时间: 2024-10-06 04:24:22

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

PHP-----作业题:搜索自动显示

显示页面: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv=

jQuery自动显示搜索下拉框

描述:当用选择查询时,根据输入的关键字动态从后台模糊查询,把结果异步显示在前端. jsp代码; <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <% String

bobo JQuery实现Ajax 根据商品名称自动显示价格

数据库字段:Id(主键,自增),Name(商品名称),Price(商品单价) 添加数据集DataSetProducts ,添加方法:GetDataByName() ----->对应SQL: SELECT id, name, price FROM dbo.T_Productwhere name = @name 新建一般处理程序:GetPrice.ashx 代码: using System;using System.Collections.Generic;using System.Linq;usin

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

安装好VS2013后,启动help viewer2.1在搜索栏中搜搜时结果会出现HTML源码. 要解决这个问题先来看看MINE,即Multipurpose Internet Mail Extensions(多用途互联网邮件扩展类型),它是用于电子邮件.网络文档以及Internet上其他应用程序中的文件格式规范.它设定了某种扩展名的文件用一种指定的应用程序打开的类型,当该扩展名的文件被访问时,浏览器会自动指定相应的应用程序打开.其中HTML属于MINE其中的一种格式,而在VS help viewe

用面向对象解决 输入用户名自动显示邮箱后缀列表的方法

---恢复内容开始--- 当我们注册或者登录要用邮箱格式时会显示邮箱后缀的提示下拉框 效果如图所示 主要介绍了JS输入用户名自动显示邮箱后缀列表的方法,可实现自动显示邮箱后缀名列表的功能, 原理是:一个输入框 当我输入任何字的时候 自动下拉相应的邮箱提示,在输入框输入11的时候 下拉框有所有11的邮箱 输入其他的时候 有其他文案对应的邮箱. 同理 此插件不需要任何html标签,只需要一个输入框 有相对应的id类名就ok 且父级有个class类名,其他的都不需要.内部的HTML代码都是自动生成的

**IOS自动完成(搜索自动提示)功能实现

UISearchBar搜索AutoComplete下拉列表搜索提示 http://www.codeios.com/thread-10685-1-1.html 介绍: 在搜索框上加入下拉列表.在搜索框上面输入文字时,出现下拉列表,可以用作搜索自动提示. 测试环境: [Code4App]编译测试,测试环境:Xcode 4.3, iOS 5.0. http://code4app.com/ios/Drop-Down-List/5002d3706803faf208000000

ecshop导航栏自动显示三级或多级子栏目,多级频道分类,并实现css高亮显示

ecshop导航要达到的目标: 一,比如上图,当我访问三级分类,响应式布局,这个栏目时,最顶级的元件这个分类,要高亮显示 二,如果导航上面有商品或文章频道, 并且他们有子栏目,则全自动显示所有的子栏目. 三,如果这个导航有子分类,则统一显示下拉三角标志. 代码如下 一,在includes/lib_main.php 文件中,修改掉或另外重命名并重定义一个这个get_navigator()函数,修改后的内容如下,另外get_categories_tree()这个函数为系统自带的在lib_goods.

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

摘要: 地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公交导航,驾车导航,步行导航,道路查询(交叉口),行政区划等等.如果说覆盖物Marker是地图的骨骼,那么服务,就是地图的气血.有个各种各样的地图服务,我们的地图应用才能变得有血有肉,活灵活现. 第四篇拆成了几个要点,本篇主要讲搜索服务.包括周边搜索,关键词搜索,范围搜索,搜索提示(自动完成,输入提示),行政区域,交叉路口,检索自有数据(云图). demo:http://zhaoziang.com/amap/zero_4_1.ht

css文字超出自动显示省略号

只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ overflow: hidden; } css文字超出自动显示省略号显示省略号 css文字超出自动显示省略号 css文字超出自动显示省略号显示省略号 02.针对table table{ table-layout:fixed; } table td{ word-break:keep-all;/* 不换行