基于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实现的关键,发送异步请求.接收服务器端的响应以及执 ...
随机推荐
- JavaWeb-Eclipse的下载和安装
Eclipse下载地址:http://www.eclipse.org/downloads/ Eclipse集成JDK 遇见弹框: 1.这是由于缺少JRE所导致的,Eclipse中带有自己的编译器,因此 ...
- React.js 样式组件：React Style
点这里 React Style 是 React.js 可维护的样式组件.使用 React Native StyleSheet.create一样的样式. 完全使用 JavaScript 定义样式: ? ...
- com组件的注册
错误: 检索 COM 类工厂中 CLSID 为 {79AD7B73-C515-40B4-8B02-CB0F5FA5A1A8} 的组件失败,原因是出现以下错误: 80040154 没有注册类 (异常来自 ...
- Linux之select系统调用_2
在上一篇博文中,我们的程序中我们有3个客户端,因此也事先建立了3个管道,每个客户端分别使用一个管道向服务器发送消息.而在服务器端使用select系统调用,只要监测到某一管道有消息写入,服务器就将其re ...
- 深入剖析阿里巴巴云梯YARN集群
我的一篇文章<深入剖析阿里巴巴云梯YARN集群> 已经发表在程序员2013年11月刊中, 原文链接为http://www.csdn.net/article/2013-12-04/28177 ...
- Java7编程高手进阶读书笔记--final学习
这段时间终于有了一些自己的时间,在网上淘了一本书把java学习下,顺便记下每日的学习心得 工作快两年多了,才知道基础的东西永远看的时候都有一个新的体验,今天中午看了下final,把自己炒的代码贴在这以 ...
- iOS 开发--NSMutableArray使用枚举方法
可变数组也可以使用枚举方法, 我们在这里提供了两种枚举方法, 一个是正序枚举, 一个是倒序枚举, 在正序枚举中, 元素的个数和顺序都是不可以修改的, 但是在倒序枚举中却可以修改, 这有些耐人寻味. 涉 ...
- Heap和Heapify
最近复习数据结构,又回去再看塞神的课件,看到PriorityQueue的实现.自己也根据塞神的代码写一写. 下面使用Binary Heap实现了一个简单的 Max-oriented PriorityQ ...
- php mysql_insert_id()
mysql_insert_id mysql_insert_id()返回给定的 link_identifier中上一步 INSERT 查询中产生的 AUTO_INCREMENT 的 ID 号.如果没有指 ...
- 运用CodeSmith Studio实现C#项目构架
http://www.cnblogs.com/iCaca/category/80950.html http://www.cnblogs.com/BlueBreeze/archive/2011/07/1 ...