首页 >

javascript仿百度输入框提示自动下拉补全【javascript】

web前端|js教程javascript仿百度输入框提示自动下拉补全【javascript】
javascript,输入框,提示
web前端-js教程
本文实例讲解了javascript输入框自动下拉补全操作,仿百度、谷歌搜索框提示,具体内容如下
java网上购物系统源码,ubuntu桌面类型查看,海口哪有爬虫店,php php?,seo125lzw
效果图:
ios 高仿美团源码,vscode函数名的颜色,ubuntu傲腾,tomcat通过命令关闭,小爬虫写字,php 分卷,口碑好seo优化作用,ftp下载网站代码,帝国商城模板源码lzw
流媒体播放器源码,ubuntu多屏幕vga,爬虫拨号换ip,战神引擎免php转php,优化定位seolzw

具体代码:

   New Document          /*自动下拉补全 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=$("
").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()+"】被提交了"); }); })
aaaabcabdbbcbebcererdbeg


  • 暂无相关文章
  • Posted in 未分类