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);
};
};
AJAX 搜索自动显示练习的更多相关文章
- VS2013 help viewer搜索结果显示源码以及桌面独立运行help viewer
安装好VS2013后,启动help viewer2.1在搜索栏中搜搜时结果会出现HTML源码. 要解决这个问题先来看看MINE,即Multipurpose Internet Mail Extensio ...
- 【高德地图API】从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索
原文:[高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索 摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公 ...
- [LeetCode] Design Search Autocomplete System 设计搜索自动补全系统
Design a search autocomplete system for a search engine. Users may input a sentence (at least one wo ...
- Android BLE与终端通信(二)——Android Bluetooth基础科普以及搜索蓝牙设备显示列表
Android BLE与终端通信(二)--Android Bluetooth基础搜索蓝牙设备显示列表 摘要 第一篇算是个热身,这一片开始来写些硬菜了,这篇就是实际和蓝牙打交道了,所以要用到真机调试哟, ...
- IDEA设置取消自动显示参数提示
IDEA设置取消自动显示参数提示 最近在使用IDEA的过程中,发现方法中一直显示形参名的提示,无法选中,也无法删除,基于不同人的使用习惯不同,有的人不喜欢这种提示,我也在网上寻找各种解决方案,由于搜索 ...
- 【搜索引擎】 PostgreSQL 10 实时全文检索和分词、相似搜索、模糊匹配实现类似Google搜索自动提示
需求分析 要通过PostgreSQL实现类似Google搜索自动提示的功能,例如要实现一个查询海量数据中的商品名字,每次输入就提示用户各种相关搜索选项,例如淘宝.京东等电商查询 思路 这个功能可以用 ...
- [LeetCode] 642. Design Search Autocomplete System 设计搜索自动补全系统
Design a search autocomplete system for a search engine. Users may input a sentence (at least one wo ...
- StringBoot整合ELK实现日志收集和搜索自动补全功能(详细图文教程)
@ 目录 StringBoot整合ELK实现日志收集和搜索自动补全功能(详细图文教程) 一.下载ELK的安装包上传并解压 1.Elasticsearch下载 2.Logstash下载 3.Kibana ...
- Axure RP 8 实现 圆角文本框 圆角带筛选的下拉列表框 可自动显示滚动条
刚开始用Axure 会发现 Axure 元件库并不是很齐全,很多元件需要自己想办法解决 或者去网上去找.其实个人建议网上有现成的元件可以就下载就不必花时间去折腾.除非你也想练练手,原型这种东西除非高保 ...
随机推荐
- Android学习笔记(十)——ListView的使用(上)
//此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! ListView绝对可以称得上是 Android中最常用的控件之一,ListView允许用户通过手指上下滑动的 ...
- Linux之Shell的算术运算
在Bash的算术运算中有以下几种方法:名称 语法 范例算术扩展 $((算术式)) r ...
- 剑指Offer 二进制中1的个数
题目描述 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. 思路: 如果一个整数不为0,那么这个整数至少有一位是1.如果我们把这个整数减1,那么原来处在整数最右边的1就会变为0,原 ...
- nginx 免安装包
在一个环境下编译安装好nginx,然后可以拷贝到其他环境使用.同时避免直接安装造成的环境冲突. 首先下载好nginx和相关插件.然后编译安装到沙盒里面.demo如下: cd到nginx目录 ./con ...
- mysql允许其他电脑访问权限开通
首先进入mysql: mysql -u root 如果有密码会提示输入密码 然后输入如下授权代码, 如下即授权用户root使用密码admin123从任何主机连接到mysql服务器 GRANT ALL ...
- PHP-redis中文文档
phpredis是php的一个扩展,效率是相当高有链表排序功能,对创建内存级的模块业务关系 很有用;以下是redis官方提供的命令使用技巧: 下载地址如下: https://github.com/wi ...
- IPC-----POSIX消息队列
消息队列可以认为是一个链表.进程(线程)可以往里写消息,也可以从里面取出消息.一个进程可以往某个消息队列里写消息,然后终止,另一个进程随时可以从消息队列里取走这些消息.这里也说明了,消息队列具有随内核 ...
- C#零碎知识汇总
1.1取时间差 时刻:DateTime 时差:TimeSpan 代码: DateTime time1 = DateTime.Now; textBox1.Text = time1.ToStri ...
- POJ 1661
http://poj.org/problem?id=1661 这是一道DP的题目,求最优解 上面的这一个题是对于那个重左边开始上的函数的解释 题目要求的是从最高掉下来的小时间,那么我们就可以求从最低处 ...
- 《C++ Primer》 ---- 关于变量 与 基本类型
类型是所有程序的基础; C++ 定义了几种基本类型: 字符型(char 和 wchar_t),整型(short int long bool),浮点型(float doubel) 并且提供自定义数 ...