仿百度，谷歌输入框自动提示功能

大家使用百度谷歌的时候都会有输入自动提示的功能，心血来潮自己用Ajax模拟了一个，和大家分享分享。

下面让我们先看下效果：

输入自动提示

键盘上下移动选取

鼠标选取同样支持

支持中文匹配

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：

//高亮索引
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

后台Servlet：

/*** @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.net.URLEncoder;
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();}}

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;
}

好了，大家有什么建议或疑问可以留言哦。

源码见附件。

仿百度，谷歌输入框自动提示功能相关推荐

Ajax实现百度搜索框自动提示功能
Ajax实现百度搜索框自动提示功能当你在搜索框内写入关键字时下拉框会匹配和你输入的关键字相匹配的信息文章目录 Ajax实现百度搜索框自动提示功能一.实现效果二.代码实现 1.前端页面 2.后端 ...
jquery仿邮箱文本输入框自动加载邮箱后缀
jquery仿邮箱文本输入框自动加载邮箱后缀在像百度这样的网站注册时,你会看到输入邮箱会出现自动给用户输入补全主流邮箱.这种对于增加用户体验的小例子已司空见惯.正好看到人家写的这种js功能.还挺不错 ...
php 点击下拉显示内容,php+ajax实现仿百度查询下拉内容功能示例
本文实例讲述了php+ajax实现仿百度查询下拉内容功能.分享给大家供大家参考,具体如下: 运行效果如下: html代码: Document body{ margin:0; padding: 0; } ...
java培训教程分享：Java编写软件代码自动提示功能
本期的java培训教程分享主要是介绍的java编写软件代码的一个自动提示功能,很多零基础和初学java的同学们对这一块还不是很了解,Eclipse for android 实现代码自动提示智能提示功能 ...
eclipse hibernate配置文件（*.hbm.xml）加上自动提示功能
转自:https://blog.csdn.net/u012217085/article/details/17397843?utm_source=blogkpcl3 1. 标签:hibernate 在编 ...
[转]Android 代码自动提示功能
源地址http://blog.sina.com.cn/s/blog_7dbac12501019mbh.html 或者http://blog.csdn.net/longvslove/article/de ...
Eclipse输入Java和XML代码自动提示功能最简单的方法
Eclipse输入Java和XML代码自动提示功能 1.设置 java 文件的代码提示功能打开 Eclipse 依次选择 Window > Preferences > Java > ...
怎样增强MyEclipse的代码自动提示功能
转载自怎样增强MyEclipse的代码自动提示功能 MyElipse的默认代码提示功能隐藏了许多细节,需要开发者手动设置,一起来设置吧,让你的myeclpse更强大一般在Eclipse ,MyE ...
idea没有代码自动提示功能和包自动引入不了问题
idea没有代码自动提示功能和包自动引入不了问题原因:节电模式 File -> Power Save Mode (被勾选了) 处理方法: File -> Power Save Mode ...

仿百度，谷歌输入框自动提示功能

仿百度，谷歌输入框自动提示功能相关推荐

最新文章

热门文章