java 文本框自动提示信息_实现自动提示的文本框--普通实现和Jquery实现

普通实现:

实现自动提示的文本框

var inputField;

var popDiv;

var colorsUI;

var xmlHttp;

function createHttpRequest()

{

// var xmlHttp=null;

try

{

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}

catch (e)

{

// Internet Explorer

try

{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e)

{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

}

return xmlHttp;

}

function initVars(){

inputField = document.getElementById("colors");

popDiv = document.getElementById("popup");

colorsUI = document.getElementById("colors_ul");

}

function clearColors(){

for(var i =colorsUI.childNodes.length-1; i>=0; i--){

colorsUI.removeChild(colorsUI.childNodes[i]);

}

popDiv.className="hide";

}

function setColors(the_colors){

clearColors();

popDiv.className="show";

var oLi;

for(var i = 0; i

oLi = document.createElement("li");

colorsUI.appendChild(oLi);

oLi.appendChild(document.createTextNode(the_colors[i]));

oLi.onmouseover = function(){

this.className = "mouseOver";

}

oLi.onmouseout = function(){

this.className = "mouseOut";

}

oLi.onclick = function(){

inputField.value=this.firstChild.nodeValue;

clearColors();

}

}

}

function findColors(){

initVars();

if(inputField.value.length > 0){

createHttpRequest();

var sUrl ="auto_prompt.jsp?sColor="+inputField.value+"&timesstamp="+new Date().getTime();

xmlHttp.open("GET",sUrl,true);

xmlHttp.onreadystatechange=function(){

if (xmlHttp.readyState==4 && xmlHttp.status==200){

var aResult = new Array();

if(xmlHttp.responseText.length){

aResult = xmlHttp.responseText.split(",");

setColors(aResult);

}else{

clearColors();

}

}

}

xmlHttp.send(null);

}else{

clearColors();

}

}

Color:

JQuery 实现自动提示的文本框

JQuery 实现自动提示的文本框

var inputField;

var popDiv;

var colorsUI;

function initVars(){

inputField = $("#colors");

popDiv = $("#popup");

colorsUI = $("#colors_ul");

}

function clearColors(){

colorsUI.empty();

popDiv.removeClass("show");

}

function setColors(the_colors){

clearColors();

popDiv.addClass("show");

for(var i = 0; i

colorsUI.append($("

"+the_colors[i]+""));

colorsUI.find("li").click(function(){

inputField.val($(this).text());

clearColors();

}).hover(

function(){ $(this).addClass("mouseOver");},

function(){ $(this).removeClass("mouseOver");}

);

}

}

function findColors(){

initVars();

if(inputField.val().length > 0){

$.get("auto_prompt.jsp", {sColor:inputField.val()},

function(data){

var aResult = new Array();

if(data.length > 0 ){

aResult = data.split(",");

setColors(aResult);

}else{

clearColors();

}

});

}else{

clearColors();

}

}

Color:

服务器端简单jsp实现

pageEncoding="UTF-8"%>

Jquery ajax

//response.addHeader("pragma","no-cache");

String input = request.getParameter("sColor").trim();

if(input.length()==0)

return ;

String result="";

String [] aColors ={"a","and","as", "are","about","all", "adobe","an","account",

"b","be","bye","boy","business","back","because","before","book","below","been","blog","box"};

for(int i= 0 ; i

if(aColors[i].indexOf(input) == 0)

result+= aColors[i]+",";

}

if(result.length() > 0){

result = result.substring(0, result.length()-1);

}

response.getWriter().write(result);

response.getWriter().close();

%>

posted on 2012-11-30 10:35 fly 阅读(153) 评论(0)  编辑  收藏 所属分类: JavaScript学习