谁帮忙增加点代码功能。

本帖最后由 ddtrr 于 2011-05-12 21:23:45 编辑

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

1、【要求上到最顶端后从下面从新开始切换，下到最底端后从上面开始。（就是百度那样的）】：
增加下面蓝字else{....}
function findColors(event){
    initVars();        //初始化变量
    var colors_ul = document.getElementById('colors_ul');
    var lis = colors_ul.getElementsByTagName('li');
    var liLen=lis.length;
    var li;

    var e = event||window.event;
    if(e.keyCode==38)//上
    {
        if(currentLI>0){
            currentLI--;
        }
        else{
          currentLI=liLen-1;
        }
        li = lis[currentLI];
        if(preLi!=null){
            preLi.className = "mouseOut";
        }
        li.className="mouseOver";
        preLi=li;
        document.getElementById('colors').value=li.trueValue;
        document.getElementById('colors').onclick=function(){
            location.href='http://www.baidu.com/s?wd=';
        };
    }
    else if(e.keyCode==40)
    {//下
        if(currentLI<liLen-1){
            currentLI++;
        }
        else{
          currentLI=0;
        }        li = lis[currentLI];
        if(preLi!=null){
            preLi.className = "mouseOut";
        }
        li.className="mouseOver";
        preLi=li;
        document.getElementById('colors').value=li.trueValue;
        document.getElementById('colors').onclick=function(){
            location.href='http://www.baidu.com/s?wd='+this.value;
        };
    }else{//其他键值

    if(oInputField.value.length > 0){
        var aResult = new Array();        //用于存放匹配结果
        for(var i=0;i<aColors.length;i++)    //从颜色表中找匹配的颜色
            //必须是从单词的开始处匹配
            if(aColors[i].indexOf(oInputField.value) == 0)
                aResult.push(aColors[i]);    //压入结果
        if(aResult.length>0)    //如果有匹配的颜色则显示出来
            setColors(aResult);
        else                    //否则清除，用户多输入一个字母
            clearColors();        //就有可能从有匹配到无，到无的时候需要清除
    }
    else
        clearColors();    //无输入时清除提示框（例如用户按del键）
    currentLI=-1;
    }
}
2、【还有为什么要输入2个字符才开始配合出提示框，请帮忙改正，需按着上下不放能持续切换】：
onkeydown改为onkeypress；最好增加autocomplete="off"
<form method="post" name="myForm1">
Color: <input type="text" name="colors" id="colors" onkeypress="findColors(event);" autocomplete="off" />
</form>
1楼的第二项还有问题，改一下：
2、【还有为什么要输入2个字符才开始配合出提示框，请帮忙改正，需按着上下不放能持续切换】：
onkeydown改为onkeypress；最好增加autocomplete="off"
<form method="post" name="myForm1">
Color: <input type="text" name="colors" id="colors" onkeypress="findColors(event);" autocomplete="off" />
</form>-------------》
<form method="post" name="myForm1">
Color: <input type="text" name="colors" id="colors" onkeypress="findColors(event);" onkeyup="findColors(event);" autocomplete="off" />
</form>第一项也简化一下：
if(e.keyCode==38)//上
{
  if(currentLI>0){
  currentLI--;
  }
  else{
    currentLI=liLen-1;
  }
  li = lis[currentLI];
  。
---------》
if(e.keyCode==38)//上
{
  currentLI=currentLI>0 ? currentLI-1 : liLen-1;

  li = lis[currentLI];
  。---------------------------------------
  else if(e.keyCode==40)
  {//下
  if(currentLI<liLen-1){
  currentLI++;
  }
else{
currentLI=0;
}  li = lis[currentLI];
  。
--------》
else if(e.keyCode==40)
{//下
  currentLI=currentLI<liLen-1 ? currentLI+1 : 0;  li = lis[currentLI];
  。。
只用一个onkeyup就可以了。因为onkeydown时，它的值还是原来的，所以你开始输入一个字母时，它取的是空，自然不会马上出现结果。而在onkeyup里，就可以取到你正输入的这个字母之后的正确结果了。<form method="post" name="myForm1">
Color: <input type="text" name="colors" id="colors" onkeyup="findColors(event);" onfocus="this.value='';" />
</form>
onkeyup按着不动的话不会一直响应....也就不会一直切换。
FF可以了,ie6还不行<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html>
<head>
<title>自动提示的文本框</title>
<style>

</style>
<script language="javascript">
var preLi=null;
var aColors = ["red","green","blue","magenta","yellow","chocolate","black","aquamarine","lime","fuchsia","brass","azure","brown","bronze","deeppink","aliceblue","gray","copper","coral","feldspar","orange","orchid","pink","plum","quartz","purple","antiquewith","blanchedalmond","blueviolet","beige","burlywood","bisque","cadetblue","saddlebrown","royalblue","rosybrown","orengered","olivedrab","powderblue","peachpuff","papayawhip","paleturquoise","palevioletred","palegreen","navyblue","navajowhite","palegodenrod","violetred","yellowgreen","tomato","turquoise","thistle","springgreen","steelblue","salmon","scarlet","silver","violet","snow","tan","chartreuse","khaki","mediumslateblue","mediumvioletred","oldlace","maroom","goldenrod","wheat","whitesmoke","moccasin","mistyrose","mintcream","midnightblue","dimgray","darksalmon","slategray","skyblue","sienna","seashell","seagreen","sandybrown","gold","mediumturquoise","navy","mediumspringgreen","mediumseagreen","mediumpurpul","peru","mediumorchid","mediumblue","mediumaquamarine","maroon","limegreen","lightyellow","lightsteelblue","magenta","lightslateblue","lightslategray","lightskyblue","inen","lightseagreen","lightsalmon","lightpink","lightgray","lightgreen","lightgodenrodyellow","indianred","lavender","lightblue","lavenderblush","lightcoral","lightcyan","lightgodenrod","hotpink","greenyellow","lemonchiffon","lawngreen","deepskyblue","honeydew","golenrod","forestgreen","gostwhite","gainsboro","firebrick","dodgerblue","darkturquoise","darkslateblue","darkslategray","darkseagreen","darkred","darkorchid","darkorenge","darkviolet","floralwhite","cyan","darkgray","cornsilk","darkolivegreen","darkgoldenrod","darkblue","darkcyan","darkgreen","darkhaki","ivory","darkmagenta","cornfloewrblue"];
aColors.sort();    //按字母排序，使显示结果更友好function $(id){return document.getElementById(id)}
function clearColors(){//清除提示内容
$("colors_ul").innerHTML='';$("popup").className = "hide";
}
function setColors(the_colors){//显示提示框，传入的参数即为匹配出来的结果组成的数组
  clearColors();    //每输入一个字母就先清除原先的提示，再继续
  $("popup").className = "show";
  var oLi;
  for(var i=0;i<the_colors.length;i++){//将匹配的提示结果逐一显示给用户
    oLi = document.createElement("li");
    $("colors_ul").appendChild(oLi);
    var tt=$('colors').value;
    oLi.trueValue=the_colors[i];
    oLi.colorValue=the_colors[i].replace(tt,"<font color=red>"+tt+"</font>");
    oLi.innerHTML=oLi.colorValue;
        //oLi.appendChild(document.createTextNode(the_colors[i]));    oLi.onmouseover = function(){this.className = "mouseOver";}    //鼠标经过时高亮
    oLi.onmouseout = function(){ this.className = "mouseOut"; }  //离开时恢复原样
    oLi.onclick = function(){//用户点击某个匹配项时，设置输入框为该项的值
      $('colors').value = this.trueValue;
      clearColors();    //同时清除提示框
      $('colors').onclick=function(){ location.href='http://www.baidu.com/s?wd='+this.value; };
    }
  }
}
var currentLI=-1
function findColors(event,txt){
$('x').innerHTML= txt.value;
  var colors_ul=$('colors_ul');
  var lis = colors_ul.getElementsByTagName('li');
  var liLen=lis.length;
  var li;
  //var currentLI=-1;
  var e = event||window.event;  if(e.keyCode==38){//上
    currentLI=currentLI>0 ? currentLI-1 : liLen-1;
    li = lis[currentLI];
    if(preLi!=null){ preLi.className = "mouseOut"; }
    li.className="mouseOver";
    preLi=li;
    $('colors').value=li.trueValue;
    $('colors').onclick=function(){    location.href='http://www.baidu.com/s?wd=';  };
  }
  else if(e.keyCode==40){//下
$('x').innerHTML= currentLI;
    currentLI=currentLI<liLen-1 ? currentLI+1 : 0;
    li = lis[currentLI];
    if(preLi!=null){ preLi.className = "mouseOut"; }
    li.className="mouseOver";
    preLi=li;
    $('colors').value=li.trueValue;
    $('colors').onclick=function(){ location.href='http://www.baidu.com/s?wd='+this.value; };
  }
  else{//其他键值
   if(txt.value.length==0){//无输入时清除提示框（例如用户按del键）
   clearColors();  currentLI=-1;  return;
   }
    var aResult = new Array();        //用于存放匹配结果
    for(var i=0;i<aColors.length;i++){    //从颜色表中找匹配的颜色
      //必须是从单词的开始处匹配
      if(aColors[i].indexOf(txt.value) == 0){ aResult.push(aColors[i]); }    //压入结果
    }
    if(aResult.length>0){    //如果有匹配的颜色则显示出来
      setColors(aResult);
      $('popup').className='show';
    }
    else{clearColors(); }       //否则清除，用户多输入一个字母就有可能从有匹配到无，到无的时候需要清除
  }
}
function firstAction(txt){//alert(111)
var b=$('popup').className=='show'?true:false;
  if(txt.value.length==0||b)return
  var aResult = new Array();        //用于存放匹配结果
  for(var i=0;i<aColors.length;i++){    //从颜色表中找匹配的颜色
    //必须是从单词的开始处匹配
    if(aColors[i].indexOf(txt.value) == 0){ aResult.push(aColors[i]); }    //压入结果
  }
  if(aResult.length>0){    //如果有匹配的颜色则显示出来
    setColors(aResult);    $('popup').className='show';
  }
}
</script>
</head>
<body>
<form method="post" name="myForm1">
Color: <input type="text" name="colors" id="colors"  onkeypress="findColors(event,this);" onkeyup="firstAction(this);"  />
</form>
<div id="popup">
    <ul id="colors_ul"></ul>
</div>
</body>
</html>
见鬼，贴错了，这个FF可以了,ie6还不行（主要是删除事件问题）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html>
<head>
<title>自动提示的文本框</title>
<style>

</style>
<script language="javascript">
var preLi=null;
var aColors = ["red","green","blue","magenta","yellow","chocolate","black","aquamarine","lime","fuchsia","brass","azure","brown","bronze","deeppink","aliceblue","gray","copper","coral","feldspar","orange","orchid","pink","plum","quartz","purple","antiquewith","blanchedalmond","blueviolet","beige","burlywood","bisque","cadetblue","saddlebrown","royalblue","rosybrown","orengered","olivedrab","powderblue","peachpuff","papayawhip","paleturquoise","palevioletred","palegreen","navyblue","navajowhite","palegodenrod","violetred","yellowgreen","tomato","turquoise","thistle","springgreen","steelblue","salmon","scarlet","silver","violet","snow","tan","chartreuse","khaki","mediumslateblue","mediumvioletred","oldlace","maroom","goldenrod","wheat","whitesmoke","moccasin","mistyrose","mintcream","midnightblue","dimgray","darksalmon","slategray","skyblue","sienna","seashell","seagreen","sandybrown","gold","mediumturquoise","navy","mediumspringgreen","mediumseagreen","mediumpurpul","peru","mediumorchid","mediumblue","mediumaquamarine","maroon","limegreen","lightyellow","lightsteelblue","magenta","lightslateblue","lightslategray","lightskyblue","inen","lightseagreen","lightsalmon","lightpink","lightgray","lightgreen","lightgodenrodyellow","indianred","lavender","lightblue","lavenderblush","lightcoral","lightcyan","lightgodenrod","hotpink","greenyellow","lemonchiffon","lawngreen","deepskyblue","honeydew","golenrod","forestgreen","gostwhite","gainsboro","firebrick","dodgerblue","darkturquoise","darkslateblue","darkslategray","darkseagreen","darkred","darkorchid","darkorenge","darkviolet","floralwhite","cyan","darkgray","cornsilk","darkolivegreen","darkgoldenrod","darkblue","darkcyan","darkgreen","darkhaki","ivory","darkmagenta","cornfloewrblue"];
aColors.sort();    //按字母排序，使显示结果更友好function $(id){return document.getElementById(id)}function clearColors(){//清除提示内容
$("colors_ul").innerHTML='';$("popup").className = "hide";
}
function setColors(the_colors){//显示提示框，传入的参数即为匹配出来的结果组成的数组
  clearColors();    //每输入一个字母就先清除原先的提示，再继续
  $("popup").className = "show";
  var oLi;
  for(var i=0;i<the_colors.length;i++){//将匹配的提示结果逐一显示给用户
    oLi = document.createElement("li");
    $("colors_ul").appendChild(oLi);
    var tt=$('colors').value;
    oLi.trueValue=the_colors[i];
    oLi.colorValue=the_colors[i].replace(tt,"<font color=red>"+tt+"</font>");
    oLi.innerHTML=oLi.colorValue;
        //oLi.appendChild(document.createTextNode(the_colors[i]));    oLi.onmouseover = function(){this.className = "mouseOver";}    //鼠标经过时高亮
    oLi.onmouseout = function(){ this.className = "mouseOut"; }  //离开时恢复原样
    oLi.onclick = function(){//用户点击某个匹配项时，设置输入框为该项的值
      $('colors').value = this.trueValue;
      clearColors();    //同时清除提示框
      $('colors').onclick=function(){ location.href='http://www.baidu.com/s?wd='+this.value; };
    }
  }
}
var currentLI=-1
function findColors(event,txt){
  var colors_ul=$('colors_ul');
  var lis = colors_ul.getElementsByTagName('li');
  var liLen=lis.length;
  var li;
  //var currentLI=-1;
  var e = event||window.event;  if(e.keyCode==38){//上
    currentLI=currentLI>0 ? currentLI-1 : liLen-1;
    li = lis[currentLI];
    if(preLi!=null){ preLi.className = "mouseOut"; }
    li.className="mouseOver";
    preLi=li;
    $('colors').value=li.trueValue;
    $('colors').onclick=function(){    location.href='http://www.baidu.com/s?wd=';  };
  }
  else if(e.keyCode==40){//下
    currentLI=currentLI<liLen-1 ? currentLI+1 : 0;
    li = lis[currentLI];
    if(preLi!=null){ preLi.className = "mouseOut"; }
    li.className="mouseOver";
    preLi=li;
    $('colors').value=li.trueValue;
    $('colors').onclick=function(){ location.href='http://www.baidu.com/s?wd='+this.value; };
  }
  else{//其他键值
   if(txt.value.length==0){//无输入时清除提示框（例如用户按del键）
   clearColors();  currentLI=-1;  return;
   }
    var aResult = new Array();        //用于存放匹配结果
    for(var i=0;i<aColors.length;i++){    //从颜色表中找匹配的颜色
      //必须是从单词的开始处匹配
      if(aColors[i].indexOf(txt.value) == 0){ aResult.push(aColors[i]); }    //压入结果
    }
    if(aResult.length>0){    //如果有匹配的颜色则显示出来
      setColors(aResult);
      $('popup').className='show';
    }
    else{clearColors(); }       //否则清除，用户多输入一个字母就有可能从有匹配到无，到无的时候需要清除
  }
}
var firstAction=function(txt){
var b=$('popup').className=='show'?true:false;
//alert(b)
  if(txt.value.length==0||b)return
  var aResult = new Array();        //用于存放匹配结果
  for(var i=0;i<aColors.length;i++){    //从颜色表中找匹配的颜色
    //必须是从单词的开始处匹配
    if(aColors[i].indexOf(txt.value) == 0){ aResult.push(aColors[i]); }    //压入结果
  }
  if(aResult.length>0){    //如果有匹配的颜色则显示出来
    setColors(aResult);
    $('popup').className='show';
  }
if(txt.removeEventListener){
    txt.removeEventListener('keyup',firstAction, false);
  }
  else if(txt.detachEvent){
    txt.detachEvent("onkeyup",firstAction);
  }
  else{
    txt["onkeyup"]=null;
  }
};
</script>
</head>
<body>
<form method="post" name="myForm1">
Color: <input type="text" name="colors" id="colors"  onkeypress="findColors(event,this);" onkeyup="firstAction(this);"  />
</form>
<div id="popup">
    <ul id="colors_ul"></ul>
</div>
</body>
</html>
试试这个吧：IE6、FF通过
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html>
<head>
<title>自动提示的文本框</title>
<style>

</style>
<script language="javascript">
var currentLI=-1;
var preLi=null;
var aColors = ["red","green","blue","magenta","yellow","chocolate","black","aquamarine","lime","fuchsia","brass","azure","brown","bronze","deeppink","aliceblue","gray","copper","coral","feldspar","orange","orchid","pink","plum","quartz","purple","antiquewith","blanchedalmond","blueviolet","beige","burlywood","bisque","cadetblue","saddlebrown","royalblue","rosybrown","orengered","olivedrab","powderblue","peachpuff","papayawhip","paleturquoise","palevioletred","palegreen","navyblue","navajowhite","palegodenrod","violetred","yellowgreen","tomato","turquoise","thistle","springgreen","steelblue","salmon","scarlet","silver","violet","snow","tan","chartreuse","khaki","mediumslateblue","mediumvioletred","oldlace","maroom","goldenrod","wheat","whitesmoke","moccasin","mistyrose","mintcream","midnightblue","dimgray","darksalmon","slategray","skyblue","sienna","seashell","seagreen","sandybrown","gold","mediumturquoise","navy","mediumspringgreen","mediumseagreen","mediumpurpul","peru","mediumorchid","mediumblue","mediumaquamarine","maroon","limegreen","lightyellow","lightsteelblue","magenta","lightslateblue","lightslategray","lightskyblue","inen","lightseagreen","lightsalmon","lightpink","lightgray","lightgreen","lightgodenrodyellow","indianred","lavender","lightblue","lavenderblush","lightcoral","lightcyan","lightgodenrod","hotpink","greenyellow","lemonchiffon","lawngreen","deepskyblue","honeydew","golenrod","forestgreen","gostwhite","gainsboro","firebrick","dodgerblue","darkturquoise","darkslateblue","darkslategray","darkseagreen","darkred","darkorchid","darkorenge","darkviolet","floralwhite","cyan","darkgray","cornsilk","darkolivegreen","darkgoldenrod","darkblue","darkcyan","darkgreen","darkhaki","ivory","darkmagenta","cornfloewrblue"];
aColors.sort();    //按字母排序，使显示结果更友好function $(id){return document.getElementById(id)}function clearColors(){//清除提示内容
$("colors_ul").innerHTML='';$("popup").className = "hide";currentLI=-1;
}
function setColors(the_colors){//显示提示框，传入的参数即为匹配出来的结果组成的数组
  clearColors();    //每输入一个字母就先清除原先的提示，再继续
  $("popup").className = "show";
  var oLi;
  for(var i=0;i<the_colors.length;i++){//将匹配的提示结果逐一显示给用户
    oLi = document.createElement("li");
    oLi.style.height=15+'px';
    $("colors_ul").appendChild(oLi);
    var tt=$('colors').value;
    oLi.trueValue=the_colors[i];
    oLi.colorValue=the_colors[i].replace(tt,"<font color=red>"+tt+"</font>");
    oLi.innerHTML=oLi.colorValue;
    oLi.onmouseover = function(){this.className = "mouseOver";}    //鼠标经过时高亮
    oLi.onmouseout = function(){ this.className = "mouseOut"; }  //离开时恢复原样
    oLi.onclick = function(){//用户点击某个匹配项时，设置输入框为该项的值
      $('colors').value = this.trueValue;      clearColors();    //同时清除提示框
      $('colors').onclick=function(){ location.href='http://www.baidu.com/s?wd='+this.value; };
    }
  }
}function findColors(e,txt){
  var e = e||window.event;
  var keyCode=e.keyCode||e.which;
  if(keyCode==38||keyCode==40){return;}
if(txt.value.length==0){ clearColors();  return; }//无输入时清除提示框（例如用户按del键）

  var aResult = new Array();        //用于存放匹配结果
  for(var i=0;i<aColors.length;i++){    //从颜色表中找匹配的颜色,必须是从单词的开始处匹配
    if(aColors[i].indexOf(txt.value) == 0){ aResult.push(aColors[i]); }    //压入结果
  }
  if(aResult.length>0){ setColors(aResult);  }//如果有匹配的颜色则显示出来
  else{clearColors(); }       //否则清除，用户多输入一个字母就有可能从有匹配到无，到无的时候需要清除
}function scrollAction(e){
  var colors_ul=$('colors_ul');
  var lis = colors_ul.getElementsByTagName('li');
  var liLen=lis.length;
  var li;
  var e = e||window.event;
  var keyCode=e.keyCode  if(keyCode==38){
    currentLI=currentLI>0 ? currentLI-1 : liLen-1;
    li = lis[currentLI];
    if(preLi!=null){ preLi.className = "mouseOut"; }
    li.className="mouseOver";
    preLi=li;
    $('colors').value=li.trueValue;
    $('colors').onclick=function(){    location.href='http://www.baidu.com/s?wd=';  };
    adjustScroll(currentLI);
  }
  else if(keyCode==40){
    currentLI=currentLI<liLen-1 ? currentLI+1 : 0;
    li = lis[currentLI];
    if(preLi!=null){ preLi.className = "mouseOut"; }
    li.className="mouseOver";
    preLi=li;
    $('colors').value=li.trueValue;
    $('colors').onclick=function(){ location.href='http://www.baidu.com/s?wd='+this.value; };
    adjustScroll(currentLI);
  }
  else if(keyCode==27){
    clearColors(); setTimeout("$('colors').value=''",5);// alert(txt.value);
  }
};function adjustScroll(curIndex){
var colors_ul=$('colors_ul')
  var viewportHeight = colors_ul.clientHeight*1;
  var passedHeight = (curIndex+1)*15;
  var dif=passedHeight-viewportHeight;
  if(dif>=0){    colors_ul.scrollTop =dif;  }
  else{          colors_ul.scrollTop =0;  }
  return true;
}
</script>
</head>
<body>
Color: <input type="text" name="colors" id="colors" onkeydown="scrollAction(event);" onkeyup="findColors(event,this);"  /><div id="popup" style='height:50px;overflow: hidden;'>
    <ul id="colors_ul"></ul>
</div>
</body>
</html>说明：
1、用一个事件我实在是搞不出来了(主要是兼容太难搞了，奋斗了2个多小时，烦了放弃，呵呵)，只能用两个事件keydown和keyup，请LZ原谅。
2、即便是这样，我也不保证其他浏览器没问题。不过从代码原理角度，可能问题不大。你自己测试一下吧
还有最后一个函数干嘛用的呢？ //能去掉不？
能转成javascript不？ JQ看不太明白
小问题是点击不会转跳。
1、你要的功能都出来了，包括滚动条；最后一个函数就是操作滚动条的
2、这个就是纯JS，根本不是JQ,你被我的自定义函数$()给吓住了吧，look：
function $(id){return document.getElementById(id)}
3、我测试的环境：IE6/FF4