求助,关于网页JS 输入框的问题 下面是我写的代码,我想用纯JS做一个...
发布网友
共5个回答
热心网友
我觉得你应该用 window.event 事件来实现功能 删除键对应的键码是46
你参考下这个
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=GB18030">
<script type="text/javascript" src="js/jquery-1.4.js"></script>
<script type="text/javascript">
var hightlineindex=-1;
var timeout;
$(function(){
var wordInput=$("#word");
var wordInputoffset=wordInput.offset();
$("#auto").hide().css("border","1px black solid").css("position","absolute").css("top",wordInput.height()+wordInputoffset.top+4+"px")
.css("left",wordInputoffset.left+1+"px").width(wordInput.width());
wordInput.keyup(function(event){
var myEvent=event || window.event;
var keycode=myEvent.keyCode;
//alert(keycode);
if(keycode>=65 && keycode<=90 || keycode==8 || keycode==46){
//字母 8 退格键 46 删除键
var wordtext=$("#word").val();
var auto=$("#auto");
if(wordtext!=""){
clearTimeout(timeout);
//延迟500毫秒，避免频繁请求
timeout=setTimeout(function(){
$.post("autocomplete",{word:wordtext},function(data){
var jobj=$(data);
var wordnodes=jobj.find("word");
auto.html("");
wordnodes.each(function(i){
var wordnode=$(this);
var newdiv=$("<div>").attr("id",i);
newdiv.html(wordnode.text()).appendTo(auto);
newdiv.mouseover(function(){
if(hightlineindex!=-1){
$("#auto").children("div").eq(hightlineindex).css("background-color","white")
}
hightlineindex=$(this).attr("id");
$(this).css("background-color","red");
});
newdiv.mouseout(function(){
$(this).css("background-color","white");
hightlineindex=-1;
});
newdiv.click(function(){
var comText=$(this).text();
hightlineindex=-1;
$("#auto").hide();
$("#word").val(comText);
});
});
if(wordnodes.length>0){
auto.show();
}else{
auto.hide();
hightlineindex=-1;
}
},"xml");
},500);
}else{
auto.hide();
hightlineindex=-1;
}
}else if(keycode== 38 || keycode==40){
//向上38 和向下40
if(keycode==38){
var autochildrens=$("#auto").children("div");
if(hightlineindex!=-1){
autochildrens.eq(hightlineindex).css("background-color","white");
}else{
hightlineindex=autochildrens.length;
}
hightlineindex--;
if(hightlineindex==-1){
hightlineindex=autochildrens.length-1;
}
autochildrens.eq(hightlineindex).css("background-color","red");
}else{
var autochildrens=$("#auto").children("div");
if(hightlineindex!=-1){
autochildrens.eq(hightlineindex).css("background-color","white");
}
hightlineindex++;
if(hightlineindex==autochildrens.length){
hightlineindex=0;
}
autochildrens.eq(hightlineindex).css("background-color","red");
}
}else if(keycode==13){
//回车
if(hightlineindex!=-1){
var comText=$("#auto").hide().children("div").eq(hightlineindex).text();
hightlineindex=-1;
$("#word").val(comText);
}else{
alert($("#word").val());
$("#auto").hide();
$("#word").get(0).blur();
}
}
});
$("input[type='button']").click(function(){
alert($("#word").val());
});
});
</script>
</head>
<body>
输入： <input type="text" id="word"/>
<input type="button" value="提交"/><br>
<div id="auto"></div>
</body>
</html>
热心网友
朋友你好我是一名软件开发工程师你的代码刚才我也看过了。
首先来说你这个js没跟数据库做链接。
最简单的submit都没还是有很多缺陷的。
其实搜索引擎看似简单 也不是很简单的。
但是你有想法也是好的。
别忘了顶我一下哈。
热心网友
我只想告诉你。类似百度的提示功能是用ajax实现的。需要和数据库同步查询的
热心网友
用AJAX无刷新技术，你分太低这个功能很强大，应该没人会给你代码
热心网友
我复制下来
走起来貌似问题比较多
比较关键的是
<script src=js.js><\/script>
你的js也贴出来
