基于jquery框架的ajax搜索显示
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>search_project.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="../jquery/jquery-1.4.2.js">
</script>
<script>
// $.ajax({
// url:"../Servlet_demo1",
// type:"POST",
// data:data,
// success:function(backData){
// var p = eval("("+backData+")");
// alert(p);
// alert(p.a);
// alert(p.b[1]);
//
// }
// })
// $.getjson
// alert
// (console.info(data));
// alert(data.);
// $("#button1").click(function(){
// var data = $("#form1").serializeArray();
// });
</script>
<style>
#searchText {
font-size: 25px;
width: 500px
} #searchbutton {
font-size: 25px;
width: 100px
} #div2 {
text-align: center;;
} .ultext {
border: 2px solid grey;
margin-left: 650px;
width: 500px;
display: none;
} .ultext li {
list-style: none;
padding:2px;
margin-left: 0px;
} .keyData {
background: grey;
color: white;
}
</style>
<script>
// var sendData ="" $(function(){ $("#searchText").focus();
// 失去焦点了不显示 //增添鼠标移上去的事件
; $("#searchText").keyup(function(){
//设置不显示
$(".ultext").hide();
//删除上次的所有资源速
$(".ultext").empty();
//监听输入框是否落入，ajax远程发送请求
var text = $(this).val();
// alert($text);
//若有值则发送请求
if (text) { $.post("../Servlet_demo1", {
keyWord: text
}, function(data){
//服务器返回的data
// alert(data);
var data2 = eval("(" + data + ")");
for (var a = 0; a < data2.length; a++) {
// alert(data2[a]);
$(".ultext").append("<li>" + data2[a] + "</li>");
}
// $(".ultext>span").wrap("<li></li>");
$(".ultext>li").mouseover(function(){
// alert("iojio");
$(".ultext>li").removeClass("keyData");
$(this).addClass("keyData"); })
$(".ultext>li").click(function(){
// alert($(this).text());
$("#searchText").val($(this).text()) ; })
$(".ultext>li").mouseout(function(){
// alert("iojio");
// $(".ultext>li").removeClass("keyData");
$(this).removeClass("keyData"); }) }) $(".ultext").show(); }
else {
$(".ultext").hide();
} // $(".ultext").append("<span class='spanhaha'>"+data2[a]+"</span></br>"); }); /*
* 当失去焦点时先回调此函数，此函数执行完才会执行ajax的li监听点击事件
*
*/
$("#searchText").blur(function(){
//判断是否鼠标放在了某个li上面？
if($(".ultext>li").hasClass("keyData")) {
//若有则把选中的内容打印到text中去
$(this).val($(".ultext>li[class=keyData]").text()); }
// setTimeout(alert("ijh"),1000); //若没有 ， 说明鼠标点到了别的地方
//所以关闭div下拉
$(".ultext").hide();
$(".ultext").empty();
}); });
</script>
</head>
<body>
<div id = "div2" align="center">
<form id="form2" class = "form2">
<span><input type="text" id = "searchText"><input type="button" id="searchbutton"></span>
<div align="left" class="ultext">
</div>
</form>
</div>
</body>
</html>
基于jquery框架的ajax搜索显示的更多相关文章
- 基于jQuery实现的Ajax 验证用户名唯一性
基于jQuery实现的Ajax 验证用户名唯一性 前端jsp页面代码 <tr> <th><span class="requiredField"> ...
- 基于jQuery悬停弹出遮罩显示按钮代码
今天给大家分享一款基于jQuery悬停弹出遮罩显示按钮代码.这是是一款当鼠标悬停在图片上后,会出现一系列的按钮,文字等弹性动画效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: ...
- 基于Jquery插件Uploadify实现实时显示进度条上传图片
网址:http://www.jb51.net/article/83811.htm 这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们 ...
- 拥抱基于jquery.deferred的ajax,和层层嵌套回调的ajax说拜拜
前言 在项目中,无论是维护自己的代码,还是重构他人的项目代码,看到层层嵌套,异常冗余的某个function,那时我们的内心肯定是奔溃的! 在jquery1.5版本之前,如果我们某个操作需要多个ajax ...
- 基于Spring-Boot框架的Elasticsearch搜索服务器配置
一.相关包maven配置 <!-- https://mvnrepository.com/artifact/org.springframework.data/spring-data-elastic ...
- 基于jquery封装通用的控制显示隐藏的方法
应用场景 在项目中会存在大量这样的需求: 1.选择不同的radio单选框,页面上的部分内容随之显示隐藏 2.选择不同的option下拉框内容,页面上的部分内容随之显示隐藏 如果每次遇到这类需求都单独写 ...
- 基于jquery,php实现AJAX长轮询(LongPoll)，类似推送机制
HTTP是无状态.单向的协议,用户只能够通过客服端向服务器发送请求并由服务器处理发回一个响应.若要实现聊天室.WEBQQ.在线客服.邮箱等这些即时通讯的应用,就要用到“ 服务器推送技术(Comet)” ...
- 基于jquery开发的UI框架整理分析
根据调查得知,现在市场中的UI框架差不多40个左右,不知大家都习惯性的用哪个框架,现在市场中有几款UI框架稍微的成熟一些,也是大家比较喜欢的一种UI框架,那应该是jQuery,有部分UI框架都是根据j ...
- jQuery系列 第八章 jQuery框架Ajax模块
第八章 jQuery框架Ajax模块 8.1 jQuery框架中的Ajax简介 Ajax技术的核心是XMLHTTPRequest对象,该对象是Ajax实现的关键,发送异步请求.接收服务器端的响应以及执 ...
随机推荐
- 华为OJ：字符串加解密
题目描述 1.对输入的字符串进行加解密,并输出. 2加密方法为: 当内容是英文字母时则用该英文字母的后一个字母替换,同时字母变换大小写,如字母a时则替换为B:字母Z时则替换为a: 当内容是数字时则把该 ...
- RTP-实时协议
RTP,实时协议被用来为应用程序如音频,视频等的实时数据的传输提供端到端(end to end)的网络传输功能.传输的模型可以是单点传送或是多点传送.数据传输被一个姐妹协议——实时控制协议(RTCP) ...
- iOS开发--邮箱，电话号码，身份证正则表达式验证
//邮箱 + (BOOL) validateEmail:(NSString *)email { NSString *emailRegex = @"[A-Z0-9a-z._%+-]+@ ...
- （转载）怎么写tab?
演示地址:http://www.adanghome.com/js_demo/3/ =========================================================== ...
- React-组件嵌套-子组件通过委托向父组件传值
一.简述 父组件嵌套子组件,父组件的处理函数通过属性的方式赋值组子组件( <GenderSelect handleSelect={this.handleSelect}></Gende ...
- android 矩阵处理类：Matrix
在Android中,对图片的处理需要使用到Matrix类,Matrix是一个3 x 3的矩阵,他对图片的处理分为四个基本类型: 1.Translate 2.Scale 3.Rotate 4.Skew ...
- JavaWeb笔记——利用过滤器实现页面静态化
1.说明 页面静态化是把动态页面生成的html保存到服务器的文件上,然后再有相同请求时,不再去执行动态页面,而是直接给用户响应上次已经生成的静态页面. * 核心思路为拦截请求,实现请求转发指向静态页面 ...
- 针对安卓java入门：类和对象
定义类 class Dog { String name; int age; void jump(){ } } 生成对象: public class Test { public static void ...
- sublime 支持PHP语法提示
下载插件phpcs>> https://github.com/benmatselby/sublime-phpcs 解压后修改文件夹名字为:Phpcs 把文件夹放到packages目录下 c ...
- mongo中查询Array类型的字段中元素个数
I have a MongoDB collection with documents in the following format: { "_id" : ObjectId(&qu ...