自動補完プロンプト(回転)

ユーザーが前のアルファベットを入力することに基づいて、対応する補完ヒントを与えます.
 
1ページを表示する.html:
 
 

 
 
 
2 したjqueryauto.js:
 

//              
//         
var highlightindex = -1;
var timeoutId;
$(document).ready(function(){
	var wordInput = $("#word");
	var wordInputoffset = wordInput.offset();
	$("#auto").hide().css("border","1px black solid").css("position","absolut")
	    .css("top",wordInputoffset.top + wordInput.height() + 5 + "px")
	    .css("left",wordInputoffset.left + "px")
	    .width(wordInput.width() + 2);
	
	//                
	wordInput.keyup(function(event) {
		//           
		 var myEvent = event || window.event;
	     var keyCode = myEvent.keyCode;
		//        ，                   
	     //         （   8）     （   46），                   
		if(keyCode >=65 && keyCode <=90 || keyCode == 8 || keyCode == 46) {
			
		//1.         
		var wordText = $("#word").val();
		var autoNode = $("#auto");
		if(wordText != "") {
		//2.             
		//               
			clearTimeout(timeoutId);
		//          500  ，                
	    timeoutId = setTimeout(function(){
		$.post("AutoComplete",{word:wordText},function(data) {
		// dom  data   jquery  
			var jqueryObj = $(data);
			//     word  
			var wordNodes = jqueryObj.find("word");
			//     word  ，      ，              
			//         
            autoNode.html("");
			wordNodes.each(function(i){
				//      
				var wordNode = $(this);
				//  div  ，              
				//               
				var newDivNode = $("
").attr("id",i);
				newDivNode.html(wordNode.text()).appendTo(autoNode);
               //        ,    
				newDivNode.mouseover(function() {
					//            
					if(highlightindex != -1) {
						$("#auto").children("div").eq(highlightindex)
						  .css("background-color","white");
					}
					//        
					highlightindex	= $(this).attr("id");
					//         
				    $(this).css("background-color","green");
				});
				//        ,         
			   newDivNode.mouseout(function() {
				   //           
				   $(this).css("background-color","white");
			   });
			  //        ，      
				newDivNode.click(function() {
					//         
					  var comTest = $(this).text();
					  $("#auto").hide();
					  highlightindex = -1; 	
					  //                
					  $("#word").val(comTest); 
				});
				
			});
			//           ，      
			if(wordNodes.length > 0) {
				autoNode.show();	
			}else {
				autoNode.hide();
				//        ，         -1
				highlightindex = -1;
			}
		},"xml");
  },500);
	} else {
		autoNode.hide();
		highlightindex = -1;
	}
	  }else if(keyCode ==38 || keyCode == 40){
		  //        38   40 
		  if(keyCode == 38) {
			  //   
			  var autoNodes = $("#auto").children("div");
			  if(highlightindex != -1) {
				  //          ，         
				  autoNodes.eq(highlightindex).css("background-color","white");
				  highlightindex--;
			  }else {
				  highlightindex = autoNodes.length -1;
			  }
			  if(highlightindex == -1) {
				  //         index  -1，             
				  highlightindex = autoNodes.length - 1;
			  }
			  //             
			  autoNodes.eq(highlightindex).css("background-color","red");
		  }
		  if(keyCode == 40) {
			  //   
			  var autoNodes = $("#auto").children("div");
			  if(highlightindex != -1) {
				  //          ，         
				  autoNodes.eq(highlightindex).css("background-color","white");
			  }
			  highlightindex++;
			  if(highlightindex == autoNodes.length) {
				  //         index  -1，             
				  highlightindex = 0;
			  }
			  //             
			  autoNodes.eq(highlightindex).css("background-color","red");
		  }
	  }else if(keyCode == 13) {
		  //        
		  
		  //        
		  if(highlightindex != -1) {
			  //         
			  var comTest = $("#auto").hide().children("div").eq(highlightindex).text();
			  highlightindex = -1; 	
			  //                
			  $("#word").val(comTest);
		  }else {
			  //         
			  alert("       ["+$("#word").val()+"]    ");
			  $("#auto").hide();
			  $("#word").get(0).blur();
		  }
	  }
	});
	//       ，           
	$("input[type='button']").click(function() {
		alert("       ["+$("#word").val()+"]    ");
	});
	
})
 
   
 
 
   
3       （       jsp  xml    ）：
 
   
 
 
   






    absolute


    anyone


    anything


    apple


    abandon


    breach


    break


    boolean


  
  
  
4 web.xmlファイルはservlet    を  します.
  
  


	
	
		This is the description of my J2EE component
		This is the display name of my J2EE component
		AutoComplete
		service.AutoComplete
	

	
		AutoComplete
		/AutoComplete
	
	
	
  
    index.jsp
  

    
  
5  http://localhost:8080/AutoComplete/JqueryAutocomplete.htmlaを  したときのヒントが  され、ソースコードは  ファイルに  されます.