基于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实现的关键,发送异步请求.接收服务器端的响应以及执 ...
随机推荐
- POJ 1305 Fermat vs. Pythagoras （毕达哥拉斯三元组）
设不定方程:x^2+y^2=z^2若正整数三元组(x,y,z)满足上述方程,则称为毕达哥拉斯三元组.若gcd(x,y,z)=1,则称为本原的毕达哥拉斯三元组. 定理:正整数x,y,z构成一个本原的毕达 ...
- iOS第三方地图－百度地图定位的封装
// // BaiduMapTools.h // baidumapTest // // Created by apple on 15/8/26. // Copyright (c) 2015年 tqh. ...
- 免安装jdk 和 免安装tomcat
免安装tomcat 运行的时候要执行免安装的 jdk,可以进行如下设置. 在 startup.bat 里加上这么一句, set "JAVA_HOME=C:\jdk1.6.0_43"
- tomcat下context.xml中JNDI数据源配置
jndi(Java Naming and Directory Interface,Java命名和目录接口)是一组在Java应用中访问命名和目录服务的API.命名服务将名称和对象联系起来,使得我们可以用 ...
- soa思想，就是远程服务调用
dubbo是Java下的一套RPC框架(soa思想)
- uploadify IO Error/http error 413
阿里云的服务器 linux 服务器,php 环境,上传附件问题,记录分享一下: 开始测试的时候,都是图片,小附件,没什么问题 系统上线后,发现大的附件上传 有问题,报错 IO Error 开始检查程序 ...
- 阿里云centos6搭建vpn
下载脚本 wget http://latrell.me/wp-content/uploads/vpn_centos6.sh 运行脚本 chmod a+x vpn_centos6.sh ./vpn_ce ...
- iOS tintColor解析
在UIView中一个相对来说比较小的属性,tintColor属性是相当的强大.今天我们就来看看如何使用他,包含使用tint color进行着色标准控件.我们自定义控件甚至重新着色图像. 本章的实例程序 ...
- Spring-Boot初始篇
Spring Boot 项目旨在简化创建产品级的 Spring 应用和服务.你可通过它来选择不同的 Spring 平台.可创建独立的 Java 应用和 Web 应用,同时提供了命令行工具来允许 ‘sp ...
- 使用qmake生成Makefile
Qmake自动生成Makefile 手动写Makefile是一件痛苦的事情,稍不小心就会出错,不过qmake可以让你脱离苦海 qmake可以根据你提供的.pro文件,生成Makefile不过他可比Ma ...