基于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实现的关键,发送异步请求.接收服务器端的响应以及执 ...
随机推荐
- iOS数组和字符串的转化
NSMutableArray *components = [messageStr componentsSeparatedByString:@"*"] ; 反过来为 NSStrig ...
- POJ 1477
#include <iostream> #define MAXN 100 using namespace std; int _[MAXN]; int main() { //freopen( ...
- ＳＱＬ技术内幕－4 row_number() over( partition by XX order by XX)的用法（区别于group by 和order by）
partition by关键字是分析性函数的一部分,它和聚合函数不同的地方在于它能返回一个分组中的多条记录,而聚合函数一般只有一条反映统计值的记录,partition by用于给结果集分组,如果没有指 ...
- 使用动态SQL语句实现简单的行列转置（动态产生列）
原始数据如下图所示:(商品的销售明细)date=业务日期:Item=商品名称:saleqty=销售数量: -- 建立测试数据(表)create table test (Date varchar(10) ...
- Spring MVC 教程,快速入门,深入分析(转)
原文地址:http://elf8848.iteye.com/blog/875830/
- javamail邮件中插入图片
转载 http://duanmumu.blog.163.com/blog/static/1911133502012715104016481/ // TODO Auto-generated method ...
- JS解析json数据
JS解析json数据(如何将json字符串转化为数组) 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN&q ...
- 307. Range Sum Query - Mutable
题目: Given an integer array nums, find the sum of the elements between indices i and j (i ≤ j), inclu ...
- iOS:核心动画之关键帧动画CAKeyframeAnimation
CAKeyframeAnimation——关键帧动画 关键帧动画,也是CAPropertyAnimation的子类,与CABasicAnimation的区别是: –CABasicAnimation只能 ...
- python实现全角半角的相互转换
缘起 在自然语言处理过程中,全角.半角的的不一致会导致信息抽取不一致,因此需要统一. 转换说明 全角半角转换说明 有规律(不含空格): 全角字符unicode编码从65281~65374 (十六进制 ...