ajax+json自动提示Demo

下载地址：http://download.csdn.net/download/honghu549599aaa/4479865

Autocomplete：

/*** @author :LYL*@date:2011-4-21,下午11:15:29*/
package com.lyl.service;import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.ParserConfigurationException;
import javax.xml.transform.OutputKeys;
import javax.xml.transform.Transformer;
import javax.xml.transform.TransformerConfigurationException;
import javax.xml.transform.TransformerException;
import javax.xml.transform.TransformerFactory;
import javax.xml.transform.dom.DOMSource;
import javax.xml.transform.stream.StreamResult;import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.Node;
import org.w3c.dom.NodeList;
import org.w3c.dom.Text;
import org.xml.sax.SAXException;public class Autocomplete extends HttpServlet {public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/xml");response.setCharacterEncoding("utf-8");PrintWriter out = response.getWriter();String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";String userword=URLDecoder.decode(request.getParameter("wordtext"),"utf-8");String datas=getXml(userword,basePath);out.println(datas);out.flush();out.close();}/*** 获得匹配的字母，返回List类型* @return*/private static List<String> getResultList(String userword,String path){DocumentBuilderFactory dbf=DocumentBuilderFactory.newInstance();List<String> resultlist=new ArrayList<String>();try {DocumentBuilder db=dbf.newDocumentBuilder();Document document=db.parse(path+"/Words.xml");NodeList words=document.getElementsByTagName("word");int length=words.getLength();for(int i=0;i<length;i++){Node node=words.item(i);//获得字母String result=node.getFirstChild().getNodeValue();//这边进行一些逻辑处理，字符串的匹配，（后续工作）if(result.contains(userword)){resultlist.add(result);}}} catch (ParserConfigurationException e) {e.printStackTrace();} catch (SAXException e) {e.printStackTrace();} catch (IOException e) {e.printStackTrace();}return resultlist;}/*** 返回结果的XML字符串* @return*/private static String getXml(String userword,String path){List<String> list=getResultList(userword,path);Iterator<String> iterator=list.iterator();DocumentBuilderFactory dbf=DocumentBuilderFactory.newInstance();DocumentBuilder db=null;Document document=null;try {db=dbf.newDocumentBuilder();document=db.newDocument();//创建根节点Element root=document.createElement("words");//根节点添加到dom树上document.appendChild(root);while(iterator.hasNext()){String content=iterator.next();//创建文本节点Text word=document.createTextNode(content);//创建word节点Element child=document.createElement("word");child.appendChild(word);root.appendChild(child);}} catch (ParserConfigurationException e) {e.printStackTrace();}return doc2Xml(document);}private static String doc2Xml(Document document){//创建一个DOM转换器TransformerFactory  transformerFactory  =  TransformerFactory.newInstance();ByteArrayOutputStream  outputStream=null;try {Transformer transformer = transformerFactory.newTransformer();transformer.setOutputProperty(OutputKeys.ENCODING,"GB2312");transformer.setOutputProperty(OutputKeys.INDENT,"yes");outputStream  =  new  ByteArrayOutputStream();transformer.transform(new DOMSource(document), new StreamResult(outputStream));} catch (TransformerConfigurationException e) {e.printStackTrace();} catch (TransformerException e) {e.printStackTrace();}return outputStream.toString();}}

src/word.xml

<?xml version="1.0" encoding="UTF-8"?>
<words><word>abd</word><word>abandon</word><word>ability</word><word>append</word><word>attention</word><word>administrator</word><word>你好</word>
</words>

============

css/styles.css

@CHARSET "UTF-8";* {font-size: 18px;
}#content {width: 300px;height: 30px;padding: 0px auto;
}#button {width: 100px;height: 30px;
}.pro {cursor: default;
}#auto {background-color: white;
}

js/autopromot.js

//高亮索引
var highlightindex=-1;//设置文本框的内容
function setContent(con,index){var context=con.eq(index).text();$("#content").val(context);
}//设置背景颜色
function setBkColor(con,index,color){con.eq(index).css("background-color",color);
}$(document).ready(function(){//获得输入框节点var inputItem=$("#content");var inputOffset=inputItem.offset();var autonode=$("#auto");//设置提示框隐藏autonode.hide().css("border","1px black solid").css("position","absolute").css("top",inputOffset.top+inputItem.height()+5+"px").css("left",inputOffset.left+"px").width(inputItem.width()+"px");   //当键盘抬起时触发事件执行访问服务器业务$("#content").keyup(function(event){var myevent=event||window.event;var mykeyCode=myevent.keyCode;//字母，退格，删除，空格if(mykeyCode>=65&&mykeyCode<=90||mykeyCode==8||mykeyCode==46||mykeyCode==32){//清除上一次的内容autonode.html(" ");//获得文本框内容var word=$("#content").val();var timeDelay;if(word!=""){//取消上次提交window.clearTimeout(timeDelay);//延迟提交，这边设置的为400mstimeDelay=window.setTimeout(//将文本框的内容发到服务器$.post("Autocomplete",{wordtext:encodeURI(word)},function(data){//将返回数据转换为JQuery对象var jqObj=$(data);//找到所有的word节点var wordNodes=jqObj.find("word");wordNodes.each(function(i){//获得返回的单词内容var wordNode=$(this);var newNode=$("<div>").html(wordNode.text()).attr("id",i).addClass("pro");//将返回内容附加到页面newNode.appendTo(autonode);//处理鼠标事件var con=$("#auto").children("div");//鼠标经过newNode.mouseover(function(){if(highlightindex!=-1){setBkColor(con,highlightindex,"white");}highlightindex=$(this).attr("id");$(this).css("background-color","#ADD8E6");setContent(con,highlightindex);} );//鼠标离开newNode.mouseout(function(){$(this).css("background-color","white");}   );//鼠标点击newNode.click(function(){setContent(con,highlightindex);highlightindex=-1;autonode.hide();});} );    //each//当返回的数据长度大于0才显示if(wordNodes.length>0){autonode.show();}else{autonode.hide();}},"xml")    //post,400);    //settimeout}else{autonode.hide();highlightindex=-1;}}else{//获得返回框中的值var rvalue=$("#auto").children("div");//上下键if(mykeyCode==38||mykeyCode==40){//向上if(mykeyCode==38){if(highlightindex!=-1){setBkColor(rvalue,highlightindex,"white");highlightindex--;}if(highlightindex==-1){setBkColor(rvalue,highlightindex,"white");highlightindex=rvalue.length-1;}setBkColor(rvalue,highlightindex,"#ADD8E6");setContent(rvalue,highlightindex);}//向下if(mykeyCode==40){if(highlightindex!=rvalue.length){setBkColor(rvalue,highlightindex,"white");highlightindex++;}if(highlightindex==rvalue.length){setBkColor(rvalue,highlightindex,"white");highlightindex=0;}setBkColor(rvalue,highlightindex,"#ADD8E6");setContent(rvalue,highlightindex);}}//回车键if(mykeyCode==13){if(highlightindex!=-1){setContent(rvalue,highlightindex);highlightindex=-1;autonode.hide();}else{alert($("#content").val());}}}});//键盘抬起//当文本框失去焦点时的做法inputItem.focusout(function(){//隐藏提示框autonode.hide();}    );}
);//reday

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><base href="<%=basePath%>"><title>文本自动提示补全功能</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><link rel="stylesheet" type="text/css"href="<%=basePath%>css/styles.css"><script type="text/javascript" language="javascript" charset="gb2312"src="<%=basePath%>js/jquery.js">
</script><script type="text/javascript" language="javascript" charset="gb2312"src="<%=basePath%>js/autopromot.js">
</script></head><body>自动提示：<!-- autocomplete防止一些浏览器的自动提示完成功能 --><input type="text" name="content" id="content" autocomplete="off" /><input type="button" id="button" name="button" value="提交" οnclick="" /><div id="auto"></div><br /><p>药家鑫案死者丈夫称坚持死刑并非全为以命抵命</p></body>
</html>

ajax+json自动提示Demo相关推荐

搜索框内容自动提示bootstrap ajax
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
黑马ajax学习笔记02--art-template模板，自动提示，防抖，三级联动，fromData传参及传文件，同源，jsonp，天气预报，CROS，服务器桥接，withCredential跨域登录
1.模板引擎概述作用:使用模板引擎提供的模板语法,可以将数据和HTML拼接起来实际上是实现在客户端做数据拼接 art-template模板引擎官网:http://aui.github.io/ar ...
Notepad++ JSON关键字自动提示
Notepad++关键字自动提示 2017-08-31 目录 1 插件安装 2 往JSON中加关键字 3 智能提示最近接口测试自动化框架的的case是json格式,用例的json的格式是固定的,定义 ...
用jQuery的ajax的功能实现输入自动提示的功能
注意事项:要使用jQuery首先要把它的包引用进来( <script type="text/javascript" language="javascript&quo ...
ajax 自动提示信息,自动提示使用AJAX
我想实现自动提示文本box.I已经检查了其他职位似乎没有任何要工作我,我无论是在Web应用程序试图与website.Please在我的代码计算outthe错误英寸当我在文本框中键入字母时,什么都不会发 ...
一个通用的ajax程序（实现像百度一样自动提示功能）
1.jsp+javabean实现ajax (1),<script type="text/javascript"> String.prototype.trim=funct ...
Ajax实现百度搜索框自动提示功能
Ajax实现百度搜索框自动提示功能当你在搜索框内写入关键字时下拉框会匹配和你输入的关键字相匹配的信息文章目录 Ajax实现百度搜索框自动提示功能一.实现效果二.代码实现 1.前端页面 2.后端 ...
零基础AJAX入门（含Demo演示源文件）
零基础AJAX入门(含Demo演示源文件) 作者:一点一滴的Beer 个人主页:http://www.cnblogs.com/beer 摘要:因为笔者的大四毕业设计是做WebGIS系统,用过Web版 ...
【Notes6】ajaxjson，校验用户名，自动提示，CORS，/swagger开发rest，Websocket，DNS
文章目录 1.ajax/fetch/axios:xhr对象,$.,浏览器输入框加载脚本 1.1 fetch&axios:fetch大部分浏览器都自带了,除了ie 2.json:new Obje ...

ajax+json自动提示Demo

ajax+json自动提示Demo相关推荐

最新文章

热门文章