求一份 Java 实现 如下图源码。
求用这个写的啊Java 源码。
[解决办法]
给输入框绑定事件，通过ajax请求将输入的值，传到后台，后台操作得到总条数和前5条数据(这里有分页)，通过XML或者JSON格式返回前台来，然后解析数据，放到一个div中，然后将div放到输入框的下面。就可以了。
下面是我们做的一个类似百度提示的js：
//表示当前高亮的节点
var highlightindex = -1;
var timeoutId;
var focusOut = false;
$(document).ready(function(){
var wordInput = $("#word");
var wordInputOffset = wordInput.offset();
//隐藏自动补全框并通过CSS设置补全框的位置大小及样式
$("#auto").hide().css("border","1px black solid").css("padding-left","2px").css("position","absolute").css("background-color","white")
.css("top","83px").css("border-top-width","1px")
.css("left",wordInputOffset.left-1).width(wordInput.width()-2); //此处可根据自己的网页布局以及页面元素大小调整。
//添加键盘按下并弹起的事件
wordInput.keyup(function(event){
//处理文本框中的键盘事件
var myEvent = event
[解决办法]
window.event;
var keyCode = myEvent.keyCode;
//如果输入的是字母，退格，delete，空格或者数字键，应该将文本框中的最新信息发送给服务器,其中，空格键和数字键的加入使得输入中文也能支持~~
if((keyCode >= 65 && keyCode<=90)
[解决办法]
(keyCode >= 48 && keyCode <= 57)
[解决办法]
(keyCode>=96 && keyCode<=105)
[解决办法]
keyCode == 46
[解决办法]
keyCode == 8
[解决办法]
keyCode == 32){
//获取文本框的内容
var wordText = $("#word").val().trim();
var autoNode = $("#auto");
if(wordText==""){
$("#auto").css("display", "none");
}
if(wordText!=""){
//对上次未完成的延时操作进行取消
clearTimeout(timeoutId);
//对于服务器端进行交互延迟500ms，避免快速打字造成的频繁请求
timeoutId = setTimeout(function(){
$.post(
"search_autoTip.action",
{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 = $("<div>").attr("id",i);
var word = $(this.firstChild) ;
var count = $(this.lastChild) ;
newDivNode.html(word.text()).appendTo(autoNode);
autoNode.append(newDivNode);
//增加鼠标进入事件，高亮节点;
newDivNode.mouseover(function(){
if(highlightindex != -1){
$("#auto").children("div").eq(highlightindex).css("background-color","white");
}
highlightindex = $(this).attr("id");
$(this).css("background-color","silver").css("cursor","pointer");
});
//增加鼠标移出事件，取消当前高亮节点
newDivNode.mouseout(function(){
$(this).css("background-color","white");
focusOut = true;
});
//增加鼠标点击事件，可以进行补全
newDivNode.click(function(){
var comText = $(this).text();
comText = comText.split("(")[0];
$("#auto").hide();
highlightindex=-1;
$("#word").val(comText.trim());
});
// 判断点击区域 隐藏/显示其他区域
document.onclick = function(e) {
e = window.event
[解决办法]
e; // 兼容IE7
obj = $(e.srcElement
[解决办法]
e.target);
// 点击区域位于当前节点
if (obj.attr('id') == 'auto') {
$('#auto').show();
}else{
$('#auto').hide();
}
}
});
//如果服务器端有数据返回，则显示弹出框
if(wordNodes.length>0){
autoNode.show();
} else {
autoNode.hide();
highlightindex=-1;
}
},"xml");
},500);
}else{
$("#auto").hide();
highlightindex=-1;
}
} else if(keyCode == 38
[解决办法]
keyCode==40){
//如果输入的是向上38向下40按键
if(keyCode == 38){
//up
var autoNodes = $("#auto").children("div");
if(highlightindex !=-1)
{
autoNodes.eq(highlightindex).css("background-color","white");
highlightindex--;
var comText = $("#auto").show().children("div").eq(highlightindex).text();
comText = comText.split("(")[0];
$("#word").val(comText.trim());
}else{
highlightindex = autoNodes.length -1;
}
if(highlightindex == -1){
//如果修改索引值以后index变成-1，则将索引中指向最后一个元素
highlightindex = autoNodes.length -1;
}
//让现在被高亮的内容变成黄色
autoNodes.eq(highlightindex).css("background-color","silver");
}
if(keyCode == 40){
//down
var autoNodes = $("#auto").children("div");
if(highlightindex !=-1)
{
autoNodes.eq(highlightindex).css("background-color","white");
}
if(highlightindex > autoNodes.length-1){
highlightindex = 0 ;
}else{
highlightindex++ ;
}
// alert("highlightindex = "+highlightindex+",autoNodes.length = "+autoNodes.length) ;
//让现在被高亮的内容变成黄色
autoNodes.eq(highlightindex).css("background-color","silver");
var comText = $("#auto").show().children("div").eq(highlightindex).text();
comText = comText.split("(")[0];
$("#word").val(comText.trim());
}
}else if(keyCode == 13){
//如果按下的是回车
//下拉框有高亮的内容
if(highlightindex !=-1){
var comText = $("#auto").hide().children("div").eq(highlightindex).text();
highlightindex=-1;
// comText = comText.split(" ")[0]; //根据空格撕裂,获取第一个字符串
comText = comText.split("(")[0];
$("#word").val(comText.trim()); //将文本框内容改成选中项
//$("#form").submit();
}
//下拉框没有高亮的内容
else{
$("#auto").hide();
//让文本框失去焦点
$("#word").get(0).blur();
}
}
});
})
