当前位置:编程学习 > asp >>

asp_net手写AJAX实现类似baidu的搜索提示,自动补全已实现,只要帮我实现键盘上下键选取值就行,谢谢

键盘方向键选取DIV项值如:
追问:AJAX+javascript实现,我的代码和这个网站的差不多 http://www.cnblogs.com/xiachufeng/archive/2010/08/31/1813979.html 里面就一个DIV,没明白“每个选项div编上号”,可不可以帮我写一个 jquery的也可以 如果可以再加分 有什么我没表达清楚的可以加我QQ:84545151
答案:

其实只要弄明白了原理就可以实现了。原理如下:

1。使用javascript语言捕获键盘事件,识别出四个方向键。

2。对于每个方向键事件,执行不同的响应函数。如按了下箭头,那么就选中下一个选项。所谓的选中,就是将div设置上背景色,然后将div里的内容显示在搜索框里。你个每个选项div编上号,就可以根据编号来找到哪个div是下一条或上一条了。

建议使用jquery来写web客户端的函数。jquery是封装了javascript的一个很好用的第三方库。


//表示当前高亮的节点
var heightIndex = -1;
$(document).ready(function(){
//获取文本框,并保存
var wordInput = $("#word");
var wordInputOffSet = wordInput.offset();
var autoNode = $("#auto");
//1.页面加载时,让自动补全框隐藏,并添加CSS属性,让提示框能看到
$("#auto").hide()
.css("border","1px black solid")
.css("position","absolute")
.css("top",wordInputOffSet.top+wordInput.height()+5+"px")
.css("left",wordInputOffSet.left+"px").width(wordInput.width()+4);
//.css("width",wordInput.width());
//2.给文本框添加键盘按下并弹起的事件
$("#word").keyup(function(event){
//获取按下的键盘
var myEvent = event || window.Event;
var keyCode = myEvent.keyCode;
//如果按下的是字母,退格键,,Delte键,则将数据发送给Servlet
if(keyCode>=65 && keyCode<=90 || keyCode==8 || keyCode==46 || keyCode==32){
//2-1 获取文本框中的内容
var wordText = $(this).val();


//判断输入的文本是不是空的
if(wordText!=""){
alert(wordText);
//2-2 将文本框中的数据发送给服务器端
$.post("/jQuery_AutoComplete/AutoCompleteServlet",{word:wordText},function(data){
//2-2-1 将DOM对象转换成jQuery对象
var jQueryObj = $(data);
//2-2-2 找到所有的word节点
var wordNodes = jQueryObj.find("word");
//2-2-3 遍历所有的word节点,取出单词内容,然后将单词内容填充到提示框中

//清空原提示框中的数据
autoNode.html("");
wordNodes.each(function(){
//2-2-3-1获取单词内容
var wordNode = $(this);
//2-2-3-2新建一个DIV节点,将单词内容添加到节点中,将新建的节点添加到填出框中
$("<div>").html(wordNode.text()).appendTo(autoNode);
})
//如果服务端返回数据,则让提示框显示
if(wordNodes.length>0){
autoNode.show();
}else{
//如果没有数据返回,隐藏提示框
autoNode.hide();
//设置高亮节点索引为-1,初始化
heightIndex = -1;
}
},"xml");
}else{
//如果文本框为空,隐藏提示框
autoNode.hide();
}
}else if(keyCode==38 || keyCode==40){
//如果是向上
if(keyCode==38){
var autoNodes = $("#auto").children("div");

if(heightIndex != -1){
//移除当前提示项的CSS样式
autoNodes.eq(heightIndex).removeClass("DivIndexText");
//改变当前高亮的索引值,让上一个高亮
heightIndex--;
}else{
//如果索引值为-1,则指向最后一个元素
heightIndex = autoNodes.length-1;
}
//改变当前提示项的CSS样式
autoNodes.eq(heightIndex).addClass("DivIndexText");
}
//如果是向下的
if(keyCode==40){
var autoNodes = $("#auto").children("div");
if(heightIndex != -1){
//移除当前提示项的CSS样式
autoNodes.eq(heightIndex).removeClass("DivIndexText");
}
//改变当前高亮的索引值,让上一个高亮
heightIndex++;
if(heightIndex==autoNodes.length){
//如果索引值等于提示框中内容的数组长度,则指向最头一个元素
heightIndex = 0;
}
//改变当前提示项的CSS样式
autoNodes.eq(heightIndex).addClass("DivIndexText");
}
}else if(keyCode==13){
//如果按下的是回车键
//下拉框有高亮内容
if(heightIndex != -1){
//得到当前高亮区域的内容
var comText = $("#auto").children("div").eq(heightIndex).text();
//设置高亮节点索引为-1,初始化
heightIndex = -1;
//让提示框隐藏
$("#auto").hide();
//改变文本框中的内容
$("#word").val(comText);
}else{
var selectText = $("#word").val();
location.href=>}
}
});
})
通过全局变量heightIndex 控制键盘的。。我自己写的。测试通过,别追问说JS错误
我这有一份 发你了

上一个:一段c++代码
下一个:ajax怎么实现异地同步

CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,