做项目过程中，需要实现输入英文字母自动匹配对应字母开头的中文，经过长时间的资料搜集和实践，终于完成！于是乎，写了个小的demo，防止下次使用的时候忘记~~
以附件中的demo为例，这个demo是在MyEclipse8.5中实现的一个java web项目，整个思路是：用一个servlet监听输入框，获取输入英文字符，后台匹配，返回xml格式，前台自动解析，生成对应字符的下拉列表，实现输入框自动匹配功能。
几个重要的文件：（以demo中的文件为例，使用者可根据自己的项目修改和变通）
1、word.jsp：主要用于获取用户的输入
<html>
<head>
<title>word</title>
<script type="text/javascript" src="js/js/jquery.js"></script>
<script type="text/javascript" src="js/auto.js"></script>//实现后台交互js
</head>
<body>
<input id="word" type="text" />
<div id = "auto"> </div>
</body>
</html>2、auto.js：获取用户输入，提交后台，实现交互
$(document).ready(function(){ //一开始加载方法
var highlightindex = -1;///高亮显示的变量值(0-n) 初始-1即无任何 子div 被选中
var timeout;///服务器交互延迟
var wordInput = $("#word"); //输入框节点 <strong>（可根据项目需求修改~~~~~~~~~~~~~）</strong>
var wordInputOffset = wordInput.offset(); //获取输入框的属性函数
var autoNode = $("#auto");//初始的auto div节点<span style=" font-family: Arial, Helvetica, sans-serif;"><strong>（可根据项目需求修改~~~~~~~~~~~~~）</strong></span>
autoNode.hide();//隐藏
autoNode.css("position","absolute"); //相对于其最接近的一个最有定位设置的父对象（wordInput）进行绝对定位
autoNode.css("z-index","99");//处于顶层
autoNode.css("cursor","default");//鼠标样式
autoNode.css("filter","alpha(opacity=50");//透明度
autoNode.css("text-overflow","clip");//内容过多时不显示省略标记(...)，而是简单的裁切
autoNode.css("border","1px black solid");//边框
autoNode.css("top",wordInputOffset.top+wordInput.height()+4+"px");//设置高 以ie8 作为标准
autoNode.css("left",wordInputOffset.left-2+"px").width(wordInput.width()+5);//设置左边与宽
wordInput.blur(function()///失去焦点时促发
{
setTimeout(function() //延时200毫秒以便 鼠标的点击事件能执行
{
autoNode.hide();
highlightindex = -1;
},200);
});
wordInput.keyup(function(event)//键盘按下
{
var myEvent = event || window.event;//不同浏览器选不同事件
var keyCode = myEvent.keyCode;///键盘按下的 值
if(keyCode>=48&&keyCode<=57||keyCode >= 65 && keyCode <= 90 || keyCode==8 || keyCode ==46||keyCode==13||keyCode==32)//是英文 或退格或删除键都进与服务器交互
//if(onChange==true)
{
<span style="color:#ff0000;"> </span>var textInput = wordInput.val();//获取输入框的值
if(textInput != "" ) //输入不为空
{
clearTimeout(timeout);//清空前一次的倒数时间
timeout = setTimeout(function(){ ///延迟与服务器交互时间提高效率
$.post("servlet/InputServlet",{text:textInput},function(data) ///与服务器交互 采用xml返回格式<span style="font-family: Arial, Helvetica, sans-serif; "><strong>（可根据项目需求修改~~~~~~~~~~~~~）</strong></span>
{
var jqueryObj = $(data);//获取返回值节点
var wordNodes = jqueryObj.find("word"); //找到返回的所有xml-word节点 <word>...</word> 节点可自己在服务端定义
autoNode.html("");//清空内容防止div里面重复
wordNodes.each(function(i)//遍历所有的word节点 变量i从 0-n
{
var wordNode = $(this);//获取当前的word节点
var NewNode = $("<div>").attr("id",i);//新建一个div节点 并给以id属性且等于i值
NewNode.html(wordNode.text()).appendTo(autoNode);//把word节点的内容赋给div节点 并把div追加到（相当于内容插入） autoNode节点的div
/*NewNode.mouseover(function(){
///鼠标键盘一起用时防止同时高亮
if(highlightindex !=-1)
{
autoNode.children("div").eq(highlightindex).css("background-color","white");
}
highlightindex = $(this).attr("id");
$(this).css("background-color","blue");
});
NewNode.mouseout(function(){
$(this).css("background-color","white");
highlightindex = -1;
});
*/
NewNode.hover(//鼠标事件
function(){///鼠标移到
if(highlightindex !=-1)
{///鼠标键盘一起用时防止同时高亮
autoNode.children().eq(highlightindex).css("background-color","white");
}
var clickNode = $(this); //获取当前鼠标节点
wordInput.val(clickNode.text());//赋值给输入框
highlightindex = $(this).attr("id"); //把id值赋给highlightindex
$(this).css("background-color","gray");
},
function(){///鼠标移走
$(this).css("background-color","white");
}
);
NewNode.click(function(){///点击鼠标时
var clickNode = $(this); //获取当前鼠标节点
wordInput.val(clickNode.text());//赋值给输入框
autoNode.hide();
highlightindex =-1;
});
});
if(wordNodes.length>0) ///有返回值才显示
{
autoNode.show();
}
else{///返回为空隐藏
autoNode.hide();
}
},"xml");///.post里的方法结束
},500);///延时方法结束
}else{ ///输入为空隐藏div节点autoNode 不与服务器交互
autoNode.hide();
highlightindex = -1;
}
}
else if(keyCode ==38 || keyCode ==40)
{
var autoNodes = autoNode.children();///获取autoNodes div下的所有子节点
if(keyCode == 38)//向上
{
if(highlightindex != -1)//不为-1 原来有节点被选中
{
var clickNode = $(this); //获取当前鼠标节点
wordInput.val(clickNode.text());//赋值给输入框
autoNodes.eq(highlightindex).css("background-color","white");//改变原来背景色 白色
highlightindex--; //减一 向上移到
}
if(highlightindex == -1){ //为-1 即原来值为0到顶端了
var clickNode = $(this); //获取当前鼠标节点
wordInput.val(clickNode.text());//赋值给输入框
highlightindex = autoNodes.length - 1;//直接把变量改为最后一个 (注意长度length是1-n，而highlightindex 0-n）
}
autoNodes.eq(highlightindex).css("background-color","gray");//改变新选中的div背景色 蓝色
wordInput.val(autoNodes.eq(highlightindex).text()); //直接赋值给输入框
}
if(keyCode == 40)//向下
{
if(highlightindex!=-1)/不为-1 原来有节点被选中
{
var clickNode = $(this); //获取当前鼠标节点
wordInput.val(clickNode.text());//赋值给输入框
autoNodes.eq(highlightindex).css("background-color","white");//改变原来选中div背景色
highlightindex++; //加1 即向下移动
}
if(highlightindex==-1)//为-1及可加
{
var clickNode = $(this); //获取当前鼠标节点
wordInput.val(clickNode.text());//赋值给输入框
highlightindex++;
}
if(highlightindex == autoNodes.length)//加1后等于 子div节点长度到达底端
{
highlightindex = 0;//把顶端值赋给highlightindex
}
autoNodes.eq(highlightindex).css("background-color","gray"); //改变背景色
wordInput.val(autoNodes.eq(highlightindex).text()); 直接赋值给输入框
}
}
else if(keyCode==13)//回车
{
autoNode.hide();//隐藏div
highlightindex = -1;//高亮变量恢复默认值
//....................///可作提交操作
}
});
});3、InputServlet.java：根据前台输入，进行后台匹配操作，demo中主要实现的是根据用户输入的英文字母，匹配汉语拼音，返回拼音对应的汉字~~
String text = request.getParameter("text");//获取前台用户输入的字母
{
//根据自己项目需求，编写对应的执行策略
}
request.setAttribute("word", word);//需要返回的结果word
request.getRequestDispatcher("/wordxml.jsp").forward(request, response);//返回值在wordxml.jsp实现转化为xml格式4、web.xml：servlet监听
<servlet>
<servlet-name>InputServlet</servlet-name>
<servlet-class>servlet.InputServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>InputServlet</servlet-name>
<url-pattern>/servlet/InputServlet</url-pattern>
</servlet-mapping>上面就是整个过程的实现经过，可以根据自己项目的需求实现：英文输入匹配汉字(全拼或者首字母)，汉字输入匹配汉字等等。
demo下载：demo~~~~~~~~
版权声明：本文为xinke0802原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。