求助，关于网页JS 输入框的问题 下面是我写的代码，我想用纯JS做一个类似于百度输入框的功能！
<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><scriptl...
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<script language="javascript" type="text/javascript">
function text()
{
var text1 = document.getElementById ("text1").value;
var text;
if(text1 =="")
{
document.getElementById ("write").innerHTML = "";
}
else
{
text = "<div class='write'>";
text = text + "<ul>";
for(var i = 1; i<=10; i++)
{
text = text + "<li id='n" + i +"' onClick='C_text(" + i +")'>";
text = text + text1 + i;
text = text + "</li>";
}
text = text + "</ul>";
text = text + "</div>";
document.getElementById ("write").innerHTML = text;
}
}
function C_text(n)
{
document.getElementById ("text1").value = document.getElementById ("n" + n +"").innerHTML;
document.getElementById ("write").style.display = "none"
}
</script>
<title>百度一下，你就知道</title>
<style>
* { margin:0px; padding:0px; list-style-type: none; font-size:12px}
a { text-decoration:none; color:#123456;}
#nv { margin:100px;}
form{ position:relative;}
#kw { width:391px;padding:3px 1px;margin:0 6px 0 0;}
#text1 { width:290px; padding-left:10px;; height:25px; line-height:23px;}
.write { border:#123456 1px solid; width:290px; margin-top:-1px; border-top:none; overflow:hidden;}
.write li { height:20px; line-height:20px; padding-left:10px;}
</style>
</head>
<body>
<div id="nv">
<!--form name="f" action="s">
<input type="text" name="wd" id="kw" maxlength="100">
</form-->
<input name="b" type="text" id="text1" maxlength="100" onKeyPress="text()" onChange="text()">
<div id="write"></div>
</div>
</body>
<!--script>
var w=window,d=document,n=navigator,k=d.f.wd,a=d.getElementById("nv").getElementsByTagName("a"),isIE=n.userAgent.indexOf("MSIE")!=-1;
(function()
{
if(/q=([^&]+)/.test(location.search))
{
k.value=decodeURIComponent(RegExp.$1)
}
})();
if(n.cookieEnabled&&!/sug?=0/.test(d.cookie))
{
d.write('<script src=js.js><\/script>')
}
</script-->
</html>
大致的功能差不多了。当然，有些地方还没有美化过。
现在遇到这几个问题，比如我输入的时候是好的，但是我删除的时候，下面的字就不变了。
还有就是 如果我选择了下面的，那么上面发生改动JS好像也就不执行了。
求助！
不知道我说什么 把代码运行下就知道了。
额 我知道是ajax 数据库 我也放弃了，标题我说了 我想用纯的JS，帮我解决我说的那俩个问题就可以了。 再加20分！
新奇达特 大哥 我没做搜索引擎。
我只是想实现这个功能 关于白狐仙人 说的，那个是我复制百度的代码，他的代码是可以用的 我注释掉了。 展开
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<script language="javascript" type="text/javascript">
function text()
{
var text1 = document.getElementById ("text1").value;
var text;
if(text1 =="")
{
document.getElementById ("write").innerHTML = "";
}
else
{
text = "<div class='write'>";
text = text + "<ul>";
for(var i = 1; i<=10; i++)
{
text = text + "<li id='n" + i +"' onClick='C_text(" + i +")'>";
text = text + text1 + i;
text = text + "</li>";
}
text = text + "</ul>";
text = text + "</div>";
document.getElementById ("write").innerHTML = text;
}
}
function C_text(n)
{
document.getElementById ("text1").value = document.getElementById ("n" + n +"").innerHTML;
document.getElementById ("write").style.display = "none"
}
</script>
<title>百度一下，你就知道</title>
<style>
* { margin:0px; padding:0px; list-style-type: none; font-size:12px}
a { text-decoration:none; color:#123456;}
#nv { margin:100px;}
form{ position:relative;}
#kw { width:391px;padding:3px 1px;margin:0 6px 0 0;}
#text1 { width:290px; padding-left:10px;; height:25px; line-height:23px;}
.write { border:#123456 1px solid; width:290px; margin-top:-1px; border-top:none; overflow:hidden;}
.write li { height:20px; line-height:20px; padding-left:10px;}
</style>
</head>
<body>
<div id="nv">
<!--form name="f" action="s">
<input type="text" name="wd" id="kw" maxlength="100">
</form-->
<input name="b" type="text" id="text1" maxlength="100" onKeyPress="text()" onChange="text()">
<div id="write"></div>
</div>
</body>
<!--script>
var w=window,d=document,n=navigator,k=d.f.wd,a=d.getElementById("nv").getElementsByTagName("a"),isIE=n.userAgent.indexOf("MSIE")!=-1;
(function()
{
if(/q=([^&]+)/.test(location.search))
{
k.value=decodeURIComponent(RegExp.$1)
}
})();
if(n.cookieEnabled&&!/sug?=0/.test(d.cookie))
{
d.write('<script src=js.js><\/script>')
}
</script-->
</html>
大致的功能差不多了。当然，有些地方还没有美化过。
现在遇到这几个问题，比如我输入的时候是好的，但是我删除的时候，下面的字就不变了。
还有就是 如果我选择了下面的，那么上面发生改动JS好像也就不执行了。
求助！
不知道我说什么 把代码运行下就知道了。
额 我知道是ajax 数据库 我也放弃了，标题我说了 我想用纯的JS，帮我解决我说的那俩个问题就可以了。 再加20分！
新奇达特 大哥 我没做搜索引擎。
我只是想实现这个功能 关于白狐仙人 说的，那个是我复制百度的代码，他的代码是可以用的 我注释掉了。 展开
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>
你参考下这个
<!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都没还是有很多缺陷的。
其实搜索引擎看似简单 也不是很简单的。
但是你有想法也是好的。
别忘了顶我一下哈。
首先来说你这个js没跟数据库做链接。
最简单的submit都没还是有很多缺陷的。
其实搜索引擎看似简单 也不是很简单的。
但是你有想法也是好的。
别忘了顶我一下哈。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我只想告诉你。类似百度的提示功能是用ajax实现的。需要和数据库同步查询的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用AJAX无刷新技术，你分太低这个功能很强大，应该没人会给你代码
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我复制下来
走起来貌似问题比较多
比较关键的是
<script src=js.js><\/script>
你的js也贴出来
走起来貌似问题比较多
比较关键的是
<script src=js.js><\/script>
你的js也贴出来
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
