sudalyl
- 浏览: 100485 次
- 性别:
- 来自: 苏州
-
最新评论
-
zhang1303483789：
...
Hibernate自定义数据类型---UserType -
springdata_spring：
java程序语言学习教程 地址http://www.zuida ...
JAVA反射技术（一） -
jakenlian：
newNode.click( [align=left] f ...
仿百度，谷歌输入框自动提示功能 -
long5295：
你说的上个文章，能给个链接吗？
仿百度，谷歌输入框自动提示功能---JSON版，修复上一版的一个BUG -
潘清山：
小弟:jquery不是很懂哪个在输入框的视图在哪呢??
仿百度，谷歌输入框自动提示功能---JSON版，修复上一版的一个BUG
大家使用百度谷歌的时候都会有输入自动提示的功能，心血来潮自己用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="提交" onclick="" /> <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);
//延迟提交，这边设置的为400ms
timeDelay=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;
}
好了，大家有什么建议或疑问可以留言哦。
源码见附件。
5
顶
顶
3
踩
踩
分享到：
评论
15 楼
jakenlian
2014-04-02
newNode.click(
[align=left] function(){
setContent(con,highlightindex);
highlightindex=-1;
autonode.hide();
}
);
inputItem.focusout(
function(){
//隐藏提示框
autonode.hide();
}
);
这两段代码有冲突 点击是自动就是去焦点 所以前者不会执行
[align=left] function(){
setContent(con,highlightindex);
highlightindex=-1;
autonode.hide();
}
);
inputItem.focusout(
function(){
//隐藏提示框
autonode.hide();
}
);
这两段代码有冲突 点击是自动就是去焦点 所以前者不会执行
14 楼
wrnmb
2011-09-18
你好，能不通过xml么，我想直接从数据库里面查结果。
13 楼
sudalyl
2011-04-27
这个只是一个模仿其框架，至于后台匹配就涉及到算法问题，目前没有考虑，如果有空会添加上，呵呵。
12 楼
yy232
2011-04-27
我还以为输入字母能识别中文呢，失望啊
11 楼
sudalyl
2011-04-25
hastune 写道
sudalyl 写道
hastune 写道
以前写过一个。但是auto层是用的table。
获取的是一个商品的数据，完成自动填写的功能吧、
js代码没你那么多。:)
获取的是一个商品的数据，完成自动填写的功能吧、
js代码没你那么多。:)
呵呵，对的，你写的那个跟这个差不多，是辅助输入功能，我这个主要要涉及到用户的一些操作，比如使用键盘上下移动选取，和使用鼠标选取，所以会多一些代码，如果可以的话可以通过站内信交流，留下联系方式大家平常交流交流。
比如上下键，文本框的内容跟着变，这些都有。:)
额，那我就不知道了，不知仁兄是通过什么原理实现的，可以粘贴下JS我们探讨探讨。
10 楼
hastune
2011-04-25
sudalyl 写道
hastune 写道
以前写过一个。但是auto层是用的table。
获取的是一个商品的数据，完成自动填写的功能吧、
js代码没你那么多。:)
获取的是一个商品的数据，完成自动填写的功能吧、
js代码没你那么多。:)
呵呵，对的，你写的那个跟这个差不多，是辅助输入功能，我这个主要要涉及到用户的一些操作，比如使用键盘上下移动选取，和使用鼠标选取，所以会多一些代码，如果可以的话可以通过站内信交流，留下联系方式大家平常交流交流。
比如上下键，文本框的内容跟着变，这些都有。:)
9 楼
z_xiaofei168
2011-04-25
sudalyl 写道
z_xiaofei168
你好，你引了jquery.js吗？
还有我的Servlet的引用名是Autocomplete，你在web.xml配置注意一下，还有就是那个Words.xml，格式：
<?xml version="1.0" encoding="UTF-8"?>
<words>
<word>abandon</word>
<word>ability</word>
<word>append</word>
<word>attention</word>
<word>administrator</word>
<word>你好</word>
</words>
放在webroot下。如果没错的话你可以用FireBug调调，或者直接在JS里面加点alert(),看能执行到哪一步。在servlet里面设点断点调调。如果还不行的话，就下载源码吧，我马上放上去。
你好，你引了jquery.js吗？
还有我的Servlet的引用名是Autocomplete，你在web.xml配置注意一下，还有就是那个Words.xml，格式：
<?xml version="1.0" encoding="UTF-8"?>
<words>
<word>abandon</word>
<word>ability</word>
<word>append</word>
<word>attention</word>
<word>administrator</word>
<word>你好</word>
</words>
放在webroot下。如果没错的话你可以用FireBug调调，或者直接在JS里面加点alert(),看能执行到哪一步。在servlet里面设点断点调调。如果还不行的话，就下载源码吧，我马上放上去。
嗯，好，我再看看，有什么问题再和你交流，呵呵
8 楼
sudalyl
2011-04-24
z_xiaofei168
你好，你引了jquery.js吗？
还有我的Servlet的引用名是Autocomplete，你在web.xml配置注意一下，还有就是那个Words.xml，格式：
<?xml version="1.0" encoding="UTF-8"?>
<words>
<word>abandon</word>
<word>ability</word>
<word>append</word>
<word>attention</word>
<word>administrator</word>
<word>你好</word>
</words>
放在webroot下。如果没错的话你可以用FireBug调调，或者直接在JS里面加点alert(),看能执行到哪一步。在servlet里面设点断点调调。如果还不行的话，就下载源码吧，我马上放上去。
你好，你引了jquery.js吗？
还有我的Servlet的引用名是Autocomplete，你在web.xml配置注意一下，还有就是那个Words.xml，格式：
<?xml version="1.0" encoding="UTF-8"?>
<words>
<word>abandon</word>
<word>ability</word>
<word>append</word>
<word>attention</word>
<word>administrator</word>
<word>你好</word>
</words>
放在webroot下。如果没错的话你可以用FireBug调调，或者直接在JS里面加点alert(),看能执行到哪一步。在servlet里面设点断点调调。如果还不行的话，就下载源码吧，我马上放上去。
7 楼
z_xiaofei168
2011-04-24
sudalyl 写道
z_xiaofei168 写道
你的程序到我这怎么就不能执行出来呢？没反应呀？？？？？？？？？
你好，你可以给我发个站内信我看看你错在哪儿。
错倒是没错，但是在程序运行的时候，没反应，比如：当我在文本框中输入：a的时候，它应该自动出现与a有关的单词之类的。而我的没反应了。
6 楼
sudalyl
2011-04-24
hastune 写道
以前写过一个。但是auto层是用的table。
获取的是一个商品的数据，完成自动填写的功能吧、
js代码没你那么多。:)
获取的是一个商品的数据，完成自动填写的功能吧、
js代码没你那么多。:)
呵呵，对的，你写的那个跟这个差不多，是辅助输入功能，我这个主要要涉及到用户的一些操作，比如使用键盘上下移动选取，和使用鼠标选取，所以会多一些代码，如果可以的话可以通过站内信交流，留下联系方式大家平常交流交流。
5 楼
sudalyl
2011-04-24
z_xiaofei168 写道
你写的这个我怎么没发现你那个servlet有什么用呀？？
Servlet是作为服务器端接受用户端Ajax请求的，没有这个Servlet是无法返回信息的，在JS里面使用的post方法就是请求服务器端返回数据。
4 楼
sudalyl
2011-04-24
z_xiaofei168 写道
你的程序到我这怎么就不能执行出来呢？没反应呀？？？？？？？？？
你好，你可以给我发个站内信我看看你错在哪儿。
3 楼
z_xiaofei168
2011-04-23
你的程序到我这怎么就不能执行出来呢？没反应呀？？？？？？？？？
2 楼
z_xiaofei168
2011-04-23
你写的这个我怎么没发现你那个servlet有什么用呀？？
1 楼
hastune
2011-04-23
以前写过一个。但是auto层是用的table。
获取的是一个商品的数据，完成自动填写的功能吧、
js代码没你那么多。:)
获取的是一个商品的数据，完成自动填写的功能吧、
js代码没你那么多。:)
发表评论
-
仿百度，谷歌输入框自动提示功能---JSON版，修复上一版的一个BUG
2011-04-26 08:52 2354上个文章已经实现自动提示的功能，但是看过的童鞋们都知道我的交互 ... -
eclipse快捷键，留着查询。。。。
2011-03-20 19:45 842Ctrl+1 快速修复(最经典 ... -
IP地址分类
2010-11-21 23:35 1304我们知道因特网是全世界范围内的计算机联为一体而构成的通信网络的 ... -
SqlServer2005的安装
2010-11-21 23:33 1146windows7中安装SqlServer2005 ... -
myeclipse 8.5 插件安装---转载
2010-11-21 23:08 1314myeclipse 8.5插件安装与之前版本有所不同(我之前用 ... -
Rational Rose出现java.lang.ClassNotFoundException错误的解决方法
2010-11-21 23:08 1588今天安装Rational Rose，按照破解方法完成后，打开程 ... -
AJAX学习
2010-11-21 23:05 1024好久没碰AJAX了，最近感觉要用所以拿出来复习下： ...
相关推荐
仿百度,谷歌输入框自动提示功能---JSON版
实现输入提示，自动补全功能，仿照百度，谷歌样式设计。请大家参考，有bug或者问题给我留言。
NULL 博文链接：https://sudalyl.iteye.com/blog/1017877
本文实例讲解了javascript输入框自动下拉补全操作，仿百度、谷歌搜索框提示，具体内容如下 效果图： 具体代码： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD>...
Ajax模仿google提示输入框 使用说明 v1.8 本程序由飞飞asp乐园编写 ************************************************* 特别感谢： 一杯白开水 网友 的帮助 版本所提的修改建议 *********************************...
本文实例讲述了Android仿百度谷歌搜索自动提示框AutoCompleteTextView简单应用。分享给大家供大家参考，具体如下： 现在我们上网几乎都会用百度或者谷歌搜索信息,当我们在输入框里输入一两个字后,就会自动提示我们想...
利用javascript实现类似于百度，谷歌搜索的自动模糊搜索补全提示的功能，代码中已有详细的注释信息，可以实现鼠标点击，上下方向键浏览点击，enter确认等常用功能，可移植性不错。（修订版）
本实例实现在输入框信息时自动从数据库中获取相应提示，调试通过IE和火狐（Firefox）。在加载和显示速度上较一般的AJAX提升了很多。 实际原理：监听输入框，当输入框内容发生增减时调用js函数，js函数再去访问另一...
利用javascript实现类似于百度，谷歌搜索的自动模糊搜索补全提示的功能，代码中已有详细的注释信息，可以实现鼠标点击，上下方向键浏览点击，enter确认等常用功能，可移植性不错。（修正版）
像百度一样搜索时联想出相关信息 显示在输入框下面
利用javascript实现类似于百度，谷歌搜索的自动模糊搜索补全提示的功能，代码中已有详细的注释信息，可以实现鼠标点击，上下方向键浏览点击，enter确认等常用功能，可移植性不错。
利用 CCombobox 实现百度，google自动匹配，当用户在输入框输入内容时，在下拉框中自动提示与用户输入内容相匹配的项，供用户选择。MFC没有自动提示输入的控件，因此用CComboBox实现，在编程过程中会遇到一些问题，...
代码如下: /** * 功能:该js文件中的代码实现了[输入自动搜索提示]功能,如百度、google搜索框中输入一些字符会以下拉列表形式给出一些提示，提高了用户体验 * 使用说明:参见suggestions.txt文件 * Author:sunfei(孙飞...
输入框增加一键清除按钮可自由设置百度、谷歌、搜狗等联盟帐号COOKEI个性化设置，记录用户选择相关网址导航功能，实用性更强手写、拼音、语音大三在线输入法，解决输入障碍SOOUA V9.0 bulid2014.08.13 更新日志：1、...
本文将介绍如何实现用户输入自动提示的功能，就像谷歌百度搜索引擎一样，当用户输入关键字时，输入框下方会有提示，将与关键字相关的信息展现出来供用户选择，提升了用户体验。 本文将使用jquery ui的autocomplete...
JavaScript 文本框下拉提示，类似百度和Google的输入框提示效果，这里为了演示时加载的速度比较快，选用了一些数据，输入“1”可更好的看到效果。
现在我们上网会用百度或者谷歌搜索信息,当我们在输入框里输入一两个字后,就会自动提示我们想要的信息,这种效果在Android 是通过Android 的AutoCompleteTextView Widget 搭配ArrayAdapter 设计同类似Google 搜索...
仿百度界面设计，页面美观大方、实用性超强 超强的关键字提示功能，可根据不同分类给出不同的关键字提示。 输入框增加一键清除按钮 可自由设置百度、谷歌、搜狗等联盟帐号 COOKEI个性化设置，记录用户选择 相关...