入力ボックス自動マッチング実践(java web)

プロジェクトの過程で、英語のアルファベットを入力して自動的に対応するアルファベットの冒頭の中国語に一致することを実現する必要があります.長い間の資料収集と実践を経て、やっと完成しました.そこで、小さいdemoを書いて、次回使う時忘れないように~~添付ファイルのdemoを例にとると、このdemoはMyEclipse 8である.5で実現したjava webプロジェクトは、1つの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~~~~~~~~