输入框自动下拉补全

最新推荐文章于 2019-03-27 10:26:48 发布

weixin_33928467

最新推荐文章于 2019-03-27 10:26:48 发布

阅读量134

点赞数

原文链接：https://my.oschina.net/zhk/blog/66475

版权

为什么80%的码农都做不了架构师？>>>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript">
   /*自动下拉补全 zhk */
   var highlightindex=-1;//当前高亮的节点
$(document).ready(function(){
var wordInput=$("#word");
var wordInputOffset=wordInput.offset();

$("#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()+2);

wordInput.keyup(function (event){

var myEvent=event||window.event;
var keyCode=myEvent.keyCode;
if(keyCode>=65&&keyCode<=90||keyCode==8||keyCode==46){

     var wordText=$("#word").val();
   var autoNode=$("#auto");
if(wordText!=""){


    var wordNodes=$("span");

    autoNode.html("");
    wordNodes.each(function(i){
       var wordNode=$(this);
    var newDivNode=$("<div>").attr("id",i);

    newDivNode.html(wordNode.text()).appendTo(autoNode);
    newDivNode.mouseover(function(){//鼠标进入
      if(highlightindex!=-1){
      $("#auto").children("div").eq(highlightindex)
      .css("background-color","white");
    }
    highlightindex=$(this).attr("id");
    $(this).css("background-color","red");
     })

     newDivNode.mouseout(function(){//鼠标移除
       $(this).css("background-color","white");

       })
newDivNode.click(function(){//点击
       var comText=$(this).text();
    $("#auto").hide();
    highlightindex=-1;
    $("#word").val(comText);
       })

     })
  if(wordNodes.length>0){
    autoNode.show();
  }else{
    autoNode.hide();
    highlightindex=-1;
   }

}else{
   autoNode.hide();
     highlightindex=-1;
    }

}else if(keyCode==38||keyCode==40){
      if(keyCode==38){//向上
      var autoNodes=$("#auto").children("div");
    if(highlightindex!=-1){
       autoNodes.eq(highlightindex).css("background-color","white");
        highlightindex--;
     }else{
       highlightindex=autoNodes.length-1;
     }

     if(highlightindex==-1){
       highlightindex=autoNodes.length-1;
     }
     autoNodes.eq(highlightindex).css("background-color","red");
    }
    if(keyCode==40){
     var autoNodes=$("#auto").children("div");
    if(highlightindex!=-1){
       autoNodes.eq(highlightindex).css("background-color","white");
     }
     highlightindex++;
     if(highlightindex==autoNodes.length){
       highlightindex=0;
     }
     autoNodes.eq(highlightindex).css("background-color","red");
    }
   }else if(keyCode==13){

  if(highlightindex!=-1){
    var comText=$("#auto").hide().children("div").eq(highlightindex).text();
    highlightindex=-1;
    $("#word").val(comText);
    }else{
      alert("文本框中的【"+$("#word").val()+"】被提交了");
   $("#auto").hide();
             $("#word").get(0).blur();//失去焦点
    }
    }
   });