输入框自动匹配实践(java web)

做项目过程中，需要实现输入英文字母自动匹配对应字母开头的中文，经过长时间的资料搜集和实践，终于完成！于是乎，写了个小的demo，防止下次使用的时候忘记~~
以附件中的demo为例，这个demo是在MyEclipse8.5中实现的一个java web项目，整个思路是：用一个servlet监听输入框，获取输入英文字符，后台匹配，返回xml格式，前台自动解析，生成对应字符的下拉列表，实现输入框自动匹配功能。
几个重要的文件：（以demo中的文件为例，使用者可根据自己的项目修改和变通）
1、word.jsp：主要用于获取用户的输入

  
    

//实现后台交互js
  
  
   
   
 
  

2、auto.js：获取用户输入，提交后台，实现交互

$(document).ready(function(){ //一开始加载方法
var highlightindex = -1;///高亮显示的变量值(0-n) 初始-1即无任何 子div 被选中
var timeout;///服务器交互延迟
var wordInput = $("#word"); //输入框节点 （可根据项目需求修改~~~~~~~~~~~~~）
var wordInputOffset = wordInput.offset(); //获取输入框的属性函数
var autoNode = $("#auto");//初始的auto div节点（可根据项目需求修改~~~~~~~~~~~~~）

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)
    {
    var textInput = wordInput.val();//获取输入框的值
    if(textInput != "" ) //输入不为空
    {
    clearTimeout(timeout);//清空前一次的倒数时间
    
    timeout = setTimeout(function(){ ///延迟与服务器交互时间提高效率
    
    $.post("servlet/InputServlet",{text:textInput},function(data) ///与服务器交互 采用xml返回格式（可根据项目需求修改~~~~~~~~~~~~~）
    {
    var jqueryObj = $(data);//获取返回值节点
    var wordNodes = jqueryObj.find("word"); //找到返回的所有xml-word节点 ... 节点可自己在服务端定义
    autoNode.html("");//清空内容防止div里面重复

    wordNodes.each(function(i)//遍历所有的word节点 变量i从 0-n
    {
    var wordNode = $(this);//获取当前的word节点 
    var NewNode = $("
").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监听

 
    InputServlet
    servlet.InputServlet
  


  
    InputServlet
    /servlet/InputServlet
  

上面就是整个过程的实现经过，可以根据自己项目的需求实现：英文输入匹配汉字(全拼或者首字母)，汉字输入匹配汉字等等。

demo下载：demo~~~~~~~~