java自动补全_自动补全（新写法） 查找更快

js...............

//表示当前高亮的节点

var highlightindex = -1;

var timeoutId;

$(document).ready(function() {

var wordInput = $("#word");

var word1Input = $("#word1");

var wordInputOffset = wordInput.offset();

var word1InputOffset = word1Input.offset();

//自动补全框最开始应该隐藏起来

$("#auto").hide().css("border","1px #B5B5B5 solid").css("position","absolute")

.css("top",wordInputOffset.top + wordInput.height() + 5 + "px")

.css("left",wordInputOffset.left + "px").width(wordInput.width() + 3);

$("#auto1").hide().css("border","1px #B5B5B5 solid").css("position","absolute")

.css("top",word1InputOffset.top + word1Input.height() + 5 + "px")

.css("left",word1InputOffset.left + "px").width(word1Input.width() + 3);

//给文本框word添加键盘按下并弹起的事件

wordInput.keyup(function(event) {

//处理文本框中的键盘事件

var myEvent = event || window.event;

var keyCode = myEvent.keyCode;

//如果输入的是字母，应该将文本框中最新的信息发送给服务器

//如果输入的是退格键或删除键，也应该将文本框中的最新信息发送给服务器

if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46||keyCode==32) {

//1.首先获取文本框中的内容

var wordText = $("#word").val();

var autoNode = $("#auto");

if (wordText != "") {

//2.将文本框中的内容发送给服务器段

//alert(wordText);

clearTimeout(timeoutId);

//对于服务器交互延迟300ms,避免快速打字造成频繁请求

timeoutId = setTimeout(function(){

$.post("findSingerByPartWord.action",

{word:wordText},

function(data){

var msg = data.msg;//通过json接受数据

var wordNodes = msg.split(";");

autoNode.html("");

//循环输出wordNodes数据

for(var i=0;i

//获取单词内容

var wordNode = $(this);

//新建div节点，将单词内容加入到新建的节点中

//将新建的节点加入到弹出框的节点中

// autoNode.append("

"+wordNodes[i]+"

")

var newDivNode = $("

").attr('id',i);

newDivNode.html(wordNodes[i]).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","#1C86EE");

});

//增加鼠标移出事件，取消节点高亮

newDivNode.mouseout(function(){

$(this).css("background-color","white");

});

//增加鼠标点击事件，可以进行补全

newDivNode.click(function(){

//取出高亮节点的文本内容

var comText = $(this).text();

$("#auto").hide();

highlightindex = -1;

//文本框中的内容变成高亮节点的内容

$("#word").val(comText);

});

}

//

//如果服务器段有数据返回，则显示弹出框

if (wordNodes.length > 0) {

autoNode.show();

} else {

autoNode.hide();

//弹出框隐藏的同时，高亮节点索引值也制成-1

highlightindex = -1;

}},"json");

},300);

} 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","#1C86EE");

}

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","#1C86EE");

}

} else if (keyCode == 13) {

//如果输入的是回车

//下拉框有高亮内容

if (highlightindex != -1) {

//取出高亮节点的文本内容

var comText = $("#auto").hide().children("div").eq(highlightindex).text();

highlightindex = -1;

//文本框中的内容变成高亮节点的内容

$("#word").val(comText);

} else {

//下拉框没有高亮内容

//alert("文本框中的[" + $("#word").val() + "]被提交了");

/*$('#word').hide();

//让文本框失去焦点

$('#word').get(0).blur();*/

}

}

});

action..........................

public void findSingerByPartWord(){

words=singerService.findSingerByPartWord(word);

String ss = "";

if(words==null) {

logger.error("歌手为空");

}else{

for(int i=0;i

if(i == words.size()-1){

ss += words.get(i);

}else{

ss += words.get(i)+";";

}

}

String str = "{'msg':'"+ss+"'}";//拼接json数组 如 {msg:'王杰'},{msg:'理解'},{msg:'zz'}

outPut(str);//通过字符流传输出去

}

}

outPut.................

protected void outPut(String str) {

try {

// PrintWriter out=getResponse().getWriter();

// out.println(str);

ServletOutputStream out = ServletActionContext.getResponse()

.getOutputStream();

OutputStreamWriter ow = new OutputStreamWriter(out,"UTF-8");

ow.write(str);

ow.flush();

ow.close();

out.flush();

out.close();

} catch (IOException e) {

e.printStackTrace();

logger.error(e.getLocalizedMessage());

}

}