<link href="select2.min.css" rel="stylesheet" /> 
<script type="text/javascript" src="jquery-2.1.4.min.js"></script> 
<script type="text/javascript" src="select2.min.js"></script> 

事先因为品种草费供给,对于收件人选用与寻觅的js完成,整理如下:

提醒:能够输入”1″开首的

<!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();//失去焦点
     }
    }
  });

  $("input [type='button']").click(function(){
   alert("文本框中的【"+$("#word").val()+"】被提交了");
  });


})
</script>
 </HEAD>

 <BODY>
 <input type="text" id="word">
<input type="button" value="提交">
<div id="auto"></div>
<p>
aaa
abc
abd
bbc
beb
cer
erd
beg
<p>
 </BODY>
</HTML>

本文介绍了select和sugget结合起来使用的事例,协助下拉的直接选拔,也协助在下拉源委中输入过滤。
完全功能正是底下那样的:

图片 1

[Ctrl+A 全选
注:如需引进外界Js需刷新才具实行]

图片 2

图片 3 

主要html代码:

你可能感兴趣的篇章:

  • js输入框邮箱自动唤醒意义代码落成
  • 仿新浪今日头条登录邮箱提示效果的js代码
  • JavaScript输入邮箱自动提醒实例代码
  • 二个仿知乎登入邮箱提醒框js开采案例
  • JS完毕提交表单前的数字及邮箱校检效用
  • js仿QQ邮箱收件人选用与寻觅成效
  • JavaScript贯彻邮箱地址自动相称功效代码
  • JS仿百度电动下拉框模糊相称提示
  • javascript落到实处下拉提示采纳框
  • javascript仿百度输入框提醒自动下拉补全
  • JS完成的邮箱提醒补全效果示例

你或者感兴趣的小说:

  • js输入框邮箱自动唤醒效率代码达成
  • 仿今日头条新浪登入邮箱提醒成效的js代码
  • JavaScript输入邮箱自动提示实例代码
  • 八个仿和讯登录邮箱提醒框js开辟案例
  • JS完结提交表单前的数字及邮箱校检功用
  • js仿QQ邮箱收件人选拔与追寻作用
  • JavaScript落到实处邮箱地址自动相配成效代码
  • JavaScript
    文本框下拉提醒(自动提醒)
  • JS仿百度机动下拉框模糊相称提示
  • javascript落到实处下拉提示选用框
  • JS完结的邮箱提示补全效果示例
admin

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注