文档库 最新最全的文档下载
当前位置:文档库 › AJAX(jquery)自动补全的实现(demo)

AJAX(jquery)自动补全的实现(demo)

AJAX(jquery)自动补全的实现(demo)
AJAX(jquery)自动补全的实现(demo)

文章分类:Web前端

该demo用jquery实现的自动补全提示功能

服务器端用servlet做控制代码如下:AutoComplete .java

package service;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class AutoComplete extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

//页面传过来的字符串,用于和服务器端的单词进行完整匹配

String word = request.getParameter("word");

//将字符串保存到request对象中

request.setAttribute("word",word);

//将请求转发给视图层(注意AJAX中,这个所谓的视图层不返回页面,只返回数据,所以也可以称作使一个数据层)

request.getRequestDispatcher("wordxml.jsp").forward(request, response);

}

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

this.doGet(request, response);

}

}

页面端脚本如下:jqueryauto.js

//自动补全框最开始应该隐藏起来

//表示当前高亮的节点

var highlightindex = -1;

var timeoutId;

$(document).ready(function(){

var wordInput = $("#word");

var wordInputoffset = wordInput.offset();

$("#auto").hide().css("border","1px black

solid").css("position","absolut")

.css("top",wordInputoffset.top + wordInput.height() + 5 + "px") .css("left",wordInputoffset.left + "px")

.width(wordInput.width() + 2);

//给文本框添加键盘按下并弹起的时间

wordInput.keyup(function(event) {

//处理文本框中的键盘事件

var myEvent = event || window.event;

var keyCode = myEvent.keyCode;

//如果输入的是字母,应该将文本框中的最新的信息发送给服务器

//如果输入的是退格键(键值是8)或者删除键(键值是46),应该将文本框中的最新的信息发送给服务器

if(keyCode >=65 && keyCode <=90 || keyCode == 8 || keyCode == 46) {

//1.获取文本框里的内容

var wordText = $("#word").val();

var autoNode = $("#auto");

if(wordText != "") {

//2.将文本框的内容发送给服务器

//对上次未完成的延时操作进行取消

clearTimeout(timeoutId);

//对于服务器端进行延迟500毫秒,避免快速打字造成的频繁请求服务器

timeoutId = setTimeout(function(){

$.post("AutoComplete",{word:wordText},function(data) {

//将dom对象data转换成jquery对象

var jqueryObj = $(data);

//找到所有的word节点

var wordNodes = jqueryObj.find("word");

//遍历所有的word节点,取出单词内容,然后将单词内容添加到弹出框中 //需要清空原来的内容

autoNode.html("");

wordNodes.each(function(i){

//获取单词内容

var wordNode = $(this);

//新建div节点,将单词内容加入到新建的节点中

//将新建的节点加入到弹出框节点中

var newDivNode = $("

").attr("id",i);

newDivNode.html(wordNode.text()).appendTo(autoNode);

//增加鼠标进入事件,高亮节点

newDivNode.mouseover(function() {

//将原来高亮的节点取消高亮

if(highlightindex != -1) {

$("#auto").children("div").eq(highlightindex) .css("background-color","white");

}

//记录新的高亮索引

highlightindex = $(this).attr("id");

//鼠标进入的节点高亮

$(this).css("background-color","red");

});

//增加鼠标移除事件,取消当前节点的高亮

newDivNode.mouseout(function() {

//取消鼠标移除节点的高亮

$(this).css("background-color","white");

});

//增加鼠标点击事件,可以进行补全

newDivNode.click(function() {

//取出高亮节点的内容

var comTest = $(this).text();

$("#auto").hide();

highlightindex = -1;

//文本框中的内容变成高亮节点的内容

$("#word").val(comTest);

});

});

//如果服务器端有数据返回,则显示弹出框

if(wordNodes.length > 0) {

autoNode.show();

}else {

autoNode.hide();

//弹出框隐藏的同时,高亮节点的值也至成-1

highlightindex = -1;

}

},"xml");

},500);

} else {

autoNode.hide();

highlightindex = -1;

}

}else if(keyCode ==38 || keyCode == 40){

//如果输入的是向上38或向下40键

if(keyCode == 38) {

//向上键

var autoNodes = $("#auto").children("div");

if(highlightindex != -1) {

//如果原来存在高亮节点,则背景颜色改成白色

autoNodes.eq(highlightindex).css("background-color","white"); highlightindex--;

}else {

highlightindex = autoNodes.length -1;

}

if(highlightindex == -1) {

//如果修改索引值以后index变成-1,则将索引值指向最后一个元素 highlightindex = autoNodes.length - 1;

}

// 让现在高亮的内容变成红色

autoNodes.eq(highlightindex).css("background-color","red");

}

if(keyCode == 40) {

//向下键

var autoNodes = $("#auto").children("div");

if(highlightindex != -1) {

//如果原来存在高亮节点,则背景颜色改成白色

autoNodes.eq(highlightindex).css("background-color","white"); }

highlightindex++;

if(highlightindex == autoNodes.length) {

//如果修改索引值以后index变成-1,则将索引值指向最后一个元素 highlightindex = 0;

}

// 让现在高亮的内容变成红色

autoNodes.eq(highlightindex).css("background-color","red");

}

}else if(keyCode == 13) {

//如果输入的是回车

//下来框有高亮内容

if(highlightindex != -1) {

//取出高亮节点的内容

var comTest =

$("#auto").hide().children("div").eq(highlightindex).text();

highlightindex = -1;

//文本框中的内容变成高亮节点的内容

$("#word").val(comTest);

}else {

//下拉框没有高亮内容

alert("文本框中的内容["+$("#word").val()+"]被提交了");

$("#auto").hide();

$("#word").get(0).blur();

}

}

});

//给按钮添加事件,表示文本框的内容被提交

$("input[type='button']").click(function() {

alert("文本框中的内容["+$("#word").val()+"]被提交了");

});

})

页面代码如下:JqueryAutocomplete.html

Jquery实例:自动补全


xml数据:wordxml.jsp

<%--

ajax自动补全实例

--%>

是text/xml-->

<%@ page contentType="text/xml;charset=UTF-8" language="java" %> <%

//页面传送的字符串

String word = (String)request.getAttribute("word");

%>

<%if ("absolute".startsWith(word)) {%>

absolute

<%}%>

<%if ("anyone".startsWith(word)) {%>

anyone

<%}%>

<%if ("anything".startsWith(word)) {%>

anything

<%}%>

<%if ("apple".startsWith(word)) {%>

apple

<%}%>

<%if ("abandon".startsWith(word)) {%>

abandon

<%}%>

<%if ("breach".startsWith(word)) {%>

breach

<%}%>

<%if ("break".startsWith(word)) {%>

break

<%}%>

<%if ("boolean".startsWith(word)) {%>

boolean

<%}%>

jQuery Ajax 全解析(.ajax .post .get)

jQuery Ajax 全解析【.ajax .post .get】 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中。 url (String) : 请求的HTML页的URL地址。 data (Map) : (可选参数) 发送至服务器的 key/value 数据。 callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。 这个方法默认使用 GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。 这个方法可以很方便的动态加载一些HTML文件,例如表单。 示例代码: $(".ajax.load").load("https://www.wendangku.net/doc/946868730.html,/QLeelulu/archive/2008/03 /30/1130270.html .post", function (responseText, textStatus, XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象,即 $(".ajax.load")[0] //alert(responseText);//请求返回的内容 //alert(textStatus);//请求状态:success,error //alert(XMLHttpRequest);//XMLHttpRequest对象 }); 注:不知道为什么URL写绝对路径在FF下会出错,知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径,所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的,发现传上来后没办法获取结果,所以把运行按钮去掉了。 2. jQuery.get( url, [data], [callback] ):使用GET方式来进行异步请求 参数: url (String) : 发送请求的URL地址.

jquery+ajax

jQuery Ajax 实例全解析 jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯。 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) :载入远程HTML 文件代码并插入至DOM 中。 url (String) : 请求的HTML页的URL地址。 data (Map) : (可选参数) 发送至服务器的key/value 数据。 callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。 这个方法默认使用GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的。jQuery 1.2 中,可以指定选择符,来筛选载入的HTML 文档,DOM 中将仅插入筛选出的HTML 代码。语法形如"url #some > selector"。 这个方法可以很方便的动态加载一些HTML文件,例如表单。 示例代码: $(".ajax.load").load("https://www.wendangku.net/doc/946868730.html,/yeer/archive/2009/06/10/1500682.html .post", function (responseText, textStatus, XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象,即$(".ajax.load")[0] //alert(responseText);//请求返回的内容 //alert(textStatus);//请求状态:success,error //alert(XMLHttpRequest);//XMLHttpRequest对象 }); 这里将显示结果。 注:不知道为什么URL写绝对路径在FF下会出错,知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径,所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的,发现传上来后没办法获取结果,所以把运行按钮去掉了。

jQuery 5种调用AJax的方法

jQuery 如何调用AJax(五种方法)方法一:load() 使用load方法可以帮助你加载非本地的HTML页面,并注入到当前调用的DOM中。 $.ajaxSetup({ cache: false }); var ajax_load = "加载中..."; var loadUrl = "ajax/load.php"; $("#load_button").click(function() { $("#result").html(ajax_load).load(loadUrl);

}); cache: false 的意思是让浏览器不执行缓存功能,这样的话页面的内容将实时更新,否则某些浏览器会出现内容不更新的问题,当点击按钮后,因为加载过程需要时间,所以这里我们先使用.html方法来添加一个”加载中”的图片,然后执行load方法。 高级使用方法: 1. 加载页面某一部分 例如只加载ID为”pic”的部分,代码如下: $("#load_button").click(function() { $("#result").html(ajax_load).load(loadUrl + " #pic"); }); 2. 递交参数执行页面加载

可以给load方法添加GET或者POST参数,代码如下: $("#load_get").click(function() { $("#result").html(ajax_load).load(loadUrl, "page=0&size=10"); }); $("#load_post").click(function() { $("#result").html(ajax_load).load(loadUrl, { page: 0, size: 10 }); }); 3. 添加回调函数 回调函数可以让你在结束AJAX调用后调用该函数,比如在页面load后提示用户加载完毕:

jQuery中的Ajax几种请求方法

jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯。 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) :载入远程HTML 文件代码并插入至DOM 中。 url (String) : 请求的HTML页的URL地址。 data (Map) : (可选参数) 发送至服务器的key/value 数据。 callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。 这个方法默认使用GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的。jQuery 1.2 中,可以指定选择符,来筛选载入的HTML 文档,DOM 中将仅插入筛选出的HTML 代码。语法形如"url #some > selector"。 这个方法可以很方便的动态加载一些HTML文件,例如表单。 示例代码: $(".ajax.load").load("[url]https://www.wendangku.net/doc/946868730.html,/QLeelulu/archive/2008/03/30/1130270.html[/url] .post", function (responseText, textStatus, XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象,即$(".ajax.load")[0] //alert(responseText);//请求返回的内容 //alert(textStatus);//请求状态:success,error //alert(XMLHttpRequest);//XMLHttpRequest对象 }); 这里将显示结果。 注:不知道为什么URL写绝对路径在FF下会出错,知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径,所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的,发现传上来后没办法获取结果,所以把运行按钮去掉了。 2. jQuery.get( url, [data], [callback] ):使用GET方式来进行异步请求 参数: url (String) : 发送请求的URL地址. data (Map) : (可选) 要发送给服务器的数据,以Key/value 的键值对形式表示,会做为QueryString附加到请求URL中。 callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。 这是一个简单的GET 请求功能以取代复杂$.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用$.ajax。示例代码: $.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){ //返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等. this; // 在这里this指向的是Ajax请求的选项配置信息,请参考下图

jQuery+AJAX+JSON

jQuery 1. 什么是jQuery?? jQuery是一个优秀的JavaScript框架,一个轻量级的JavaScript类库。 jQuery的核心理念是Write less,Do more。 使用jQuery可以兼容各种浏览器,方便的处理HTML、Events、动画效果等,并且方便的为网站提供AJAX交互。 2.jQuery的特点: 利用选择器来查找要操作的节点,然后将这些节点封装成一个jQuery对象,通过调用jQuery对象的方法或者属性来实现对底层被封装的节点的操作。 好处:a、兼容性更好;b、代码更简洁 3.编程步骤: step1、使用选择器查找节点 step2、调用jQuery的属性和方法 4.jQuery对象与DOM对象之间的转换 1. 什么是jQuery对象?? jQuery对象是jQuery对底层对象的一个封装,只有创建了这个对象,才能使用类库中提供的方法。 2. DOM对象 ----> jQuery对象 DOM对象向jQuery对象的转变很容易,外面追加$和圆括号即可。 function f( ){ var obj = document.getElementById(‘d1’); //DOM -> jQuery对象

var $obj = $(obj); $obj.html(‘hello jQuery’); } 3. jQuery对象 ----> DOM对象 jQuery对象向DOM对象转化,通过调用get方法加参数值0即可$obj.get(0)。 function f( ){ var $obj = $(‘#d1’); //jQuery对象 -> DOM var obj = $(obj).get (0); obj.innerHTML = ‘hello jQuery’; } 5. jQuery选择器 1. 什么是jQuery选择器?? jQuery选择器是一种类似CSS选择器的特殊说明符号,能够帮助jQuery 定位到要操作的元素上,使用了选择器可以帮助HTML实现内容与行为的分离。只需要在元素上加上Id属性。 2. 选择器的种类 a、基本选择器 #id根据指定的ID匹配一个元素 .class根据指定的类匹配一个元素 element根据的指定的元素名匹配所有的元素

jquery_2.3 Ajax操作新

1.jQueryAjax 编程 1.1. 通过需求回顾Ajax编程 1.1.1.需求:验证用户名是否有效 需求:添加用户名的离焦校验 html代码 JS代码: 服务端代码:

jquery里面Ajax几种不同的调用方法

深圳网站建设 :https://www.wendangku.net/doc/946868730.html, jquery 里面Ajax 几种不同的调用方法 我们经常会使用ajax 去调用我们的.net 里面的ashx 去实现无刷新调用数据的方法,下面我们就来讲一下我们常用的几种方法。 第一种方法是load 方法,下面是我们的代码 //url.ashx 是调用的地址,data 是返回的信息 $(".div").load("url.ashx", function (data){ //得到的信息 }); //url.ashx 是调用的地址,data 是返回的信息,type 是参数类型,有post ,与get 两种,datatype 是返回参数的类型,id 是传入的参数 第二种方法就是$.ajax 方法,代码如下 $.ajax({ url: "url.ashx", type: "GET", dataType: "json", data: { id: "1" }, success: function (data) { //得到的信息 } }); //url.ashx 是调用的地址,data 是返回的信息,id 是传入的参数 第三种方法就是$.get 方法,代码如下 $.get("url.ashx", { id: "1"}, function (data, textStatus){ //得到的信息 }); //url.ashx 是调用的地址,data 是返回的信息,id 是传入的参数 第四种方法就是$.post 方法,代码如下 $.post("url.ashx", { id: "1"}, function (data, textStatus){ //得到的信息 });

jquery ajax实现跨域请求的方法

这篇文章主要介绍了jquery+ajax实现跨域请求的方法,详细介绍了前台及后台的处理方法,是非常实用的技巧,需要的朋友可以参考下 本文实例讲述了jquery+ajax实现跨域请求的方法。分享给大家供大家参考。具体实现方法如下: 说明:这里的datatype 为jsonp ;type 只能为get 前台请求代码如下: 代码如下: $.ajax({ type: get, url: , datatype: jsonp, jsonp: jsoncallback, success: function (result) { alert(result.success); alert(result.content); }, error: function (result, status) { //处理错误 } }); 后台处理代码validaccountsexists.aspx如下: 代码如下: string accounts = gamerequest.getquerystring(accounts); string jsoncallback = gamerequest.getquerystring(jsoncallback); response.contentencoding =system.text.encoding.utf8; response.contenttype = application/json; response.write(jsoncallback + ({\success\:\true\,\content\:\ + accounts + \})); response.end(); 希望本文所述对大家的jquery程序设计有所帮助。

jQuery调用AJAX异步操作超清晰教程

JQUERY AJAX异步操作详细说明 AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和XML)。它并非一种新的技术,而是以下几种原有技术的结合体。 1)使用CSS和XHTML来表示。 2)使用DOM模型来交互和动态显示。 3)使用XMLHttpRequest来和服务器进行异步通信。 4)使用javascript来绑定和调用。 通过AJAX异步技术,可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Request)/应答(Response)模型: 1)不需要用户等待服务端响应。在异步派发XMLHttpRequest请求后控制 权马上就被返回到浏览器。界面不会出现白板,在得到服务器响应之前 还可以友好的给出一个加载提示。 2)不需要重新加载整个页面。为XMLHttpRequest注册一个回调函数,待 服务器响应到达时,触发回调函数,并且传递所需的少量数据。“按需 取数据”也降低了服务器的压力。 3)不需要使用隐藏或内嵌的框架。在XHR对象之前,模拟Ajax通信通常 使用hack手段,如使用隐藏的或内嵌的框架(