JS的下拉提示框，和Google下拉提示框差不多

最新推荐文章于 2021-06-04 06:37:21 发布
最新推荐文章于 2021-06-04 06:37:21 发布
阅读量1.7k 收藏
点赞数
分类专栏： JavaScript 文章标签： google null border scroll input menu
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/andy1217/article/details/3402374
版权
  1. <!--Part code come from :http://us.f901.mail.yahoo.com/ym/Compose?YY=123456-->
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  5. <title>Editable listbox</title>
  6. <style>
  7. /* Common elements */
  8. body{font:small/1.2em arial,helvetica,clean,sans-serif;font:x-small;}
  9. table{font-size:inherit;font:x-small;}
  11. /* Options Templates */
  12. .ac_menu{border:1px solid #3162A6;background-color:#F6F6F6;cursor:default;overflow:hidden;-moz-box-sizing:border-box;
  13.  height:expression((this.scrollHeight>210)?"210px":"auto")}
  14. .ac_menuitem{width:100%;color:#141414;padding:2px;cursor:pointer;cursor:hand;}
  15. .ac_menuitem_selected{background-color:#D6DEEC;width:100%;color:#141414;padding:2px;cursor:pointer;cursor:hand;}
  16. /* JK */
  17. .minHeightTextarea{
  18.  height:expression((this.scrollHeight>150)?"150px":(this.scrollHeight+5)+"px");
  19.  overflow : auto;
  20. }
  21. </style>
  23. <script language=javascript>
  24. var tofieldListArray=["a@b.c","深圳市科技园","深圳市罗湖东门","深圳市罗/"湖东门","深圳市罗'湖东门","1000", "1001", "1002", "1003", "1004", "1005", "1006", "1007", "1008", "1009",
  25. "1010", "1011", "1012", "1013", "1014", "1015", "1016", "1017", "1018", "1019",
  26. "1020", "1021", "1022", "1023", "1024", "1025", "1026", "1027", "1028", "1029",
  27. "1030", "1031", "1032", "1033", "1034", "1035", "1036", "1037", "1038", "1039",
  28. "1040", "1041", "1042", "1043", "1044", "1045", "1046", "1047", "1048", "1049"
  29. ];
  30. var ccfieldListArray=tofieldListArray;
  31. </script> 
  33. <script language=javascript>
  34.  var AC_TAB = 9;   // make the selection
  35.  var AC_ENTER = 13;   // make the selection
  36.  var AC_UP_ARROW = 38;    // move the drop down list selection up by one
  37.  var AC_DOWN_ARROW = 40;  // move the drop down list selection down by one
  38.  var theListDiv;
  39.  var theListArray;
  40.  var theComboxObj;
  41.  onload=OnLoad
  42.  function OnLoad()
  43.  {
  44.   setTimeout("Initialize()", 100);
  45.  }
  46.  function Initialize()
  47.  {
  48.    AddListDivFun(document.all.tofield); 
  49.    AddListDivFun(document.all.ccfield); 
  50.  }
  52.  function AddListDivFun(obj)
  53.  {
  54.   theListArray=eval(obj.id+"ListArray");
  55.   var tempStr=new Array();
  56.   var tempI=0;
  57.   tempStr[tempI++]='<DIV style="position:relative;visibility:hidden">'
  58.     +'<DIV class=ac_menu id="'+obj.id+'ListDiv" style="FONT-SIZE: 0.9em; Z-INDEX: 1; visibility:hidden; POSITION: absolute;OVERFLOW-Y:auto; WIDTH:'+obj.offsetWidth+'; " '
  59.     +'onmouseover="mouseOverListDivFun(event)" onmouseout="mouseOutListDivFun(event);" onmousedown="mouseDownListDivFun(event);" onscroll="scrollListDivFun();">';
  60.   tempStr[tempI++]="</DIV></DIV>";
  61.   obj.insertAdjacentHTML("afterEnd",tempStr.join(""));
  62.   theListDiv=eval(obj.id+"ListDiv");
  63.   obj.onfocus=AC_OnFocus;
  64.   obj.onblur=AC_OnBlur;
  65.   obj.onkeydown=AC_OnKeyDown;
  66.   obj.autoComplete="off";
  67.   obj.onpropertychange=AC_OnPropertyChange;
  68.  }
  70.  function AC_OnFocus(obj)
  71.  {
  72.   if(obj==null) obj=event.srcElement;
  73.   theListDiv=eval(obj.id+"ListDiv");
  74.   theListArray=eval(obj.id+"ListArray");
  75.   theComboxObj=obj;
  76.   theListDiv.style.visibility="visible";
  77.   //adjustListDivScroll();
  78.  }
  80.  function AC_OnBlur(obj)
  81.  {
  82.   if(obj==null) obj=event.srcElement;
  83.   if(theListDiv.contains(document.activeElement)) obj.focus();
  84.   else theListDiv.style.visibility="hidden";
  85.  }
  87.  function AC_OnPropertyChange(obj)
  88.  {
  89.   if(obj==null) obj=event.srcElement;
  90.   theListDiv=eval(obj.id+"ListDiv");
  91.   if(theListDiv==null) return ;
  92.   theListArray=eval(obj.id+"ListArray");
  93.   var objobjValue=obj.value;
  94.   if(objValue.length==0){
  95.    theListDiv.innerHTML="";
  96.    theListDiv.selectedIndex=-1;
  97.    theListDiv.selectedItemIndex=-1;
  98.    return;  
  99.   }
  100.   var objValueHtml=htmlEncode(objValue);
  101.   theListDiv.selectedIndex=-1;
  102.   var theLastVisibleIndex=0
  103.   var tempStr=new Array();
  104.   var numOfVisibleItems=0;
  105.   for(theLastVisibleIndex=0;theLastVisibleIndex<theListArray.length;theLastVisibleIndex++)
  106.   {
  107.    if(theListArray[theLastVisibleIndex].indexOf(objValue)==0)
  108.    {
  109.     if(numOfVisibleItems==13){
  110.      tempStr[numOfVisibleItems]="<DIV class=ac_menuitem  value="+theLastVisibleIndex+" id=virtualMoreItems itemIndex="+numOfVisibleItems+"><b>...More...</b></DIV>";
  111.      numOfVisibleItems++;
  112.      break;
  113.     }
  114.     else{
  115.      tempStr[numOfVisibleItems]="<DIV class=ac_menuitem  value="+theLastVisibleIndex+" itemIndex="+numOfVisibleItems+"><b>"+objValueHtml+"</b>"+htmlEncode(theListArray[theLastVisibleIndex].substr(objValue.length))+"</DIV>";
  116.      numOfVisibleItems++;
  117.     }
  118.    }
  119.   }
  120.   theListDiv.innerHTML=tempStr.join("");
  121.   if(numOfVisibleItems>0) 
  122.   {
  123.    theListDivtheListDiv.selectedIndex=theListDiv.children[0].value;
  124.    theListDiv.selectedItemIndex=0;
  125.    theListDiv.children[0].className="ac_menuitem_selected";
  126.    adjustListDivScroll();
  127.   }
  128.   else{
  129.    theListDiv.selectedIndex=-1;
  130.    theListDiv.selectedItemIndex=-1; 
  131.   }
  132.  }
  134.  function AC_OnKeyDown(obj)
  135.  {
  136.   if(theListDiv==null) return ;
  137.   if(obj==null) obj=event.srcElement;
  138.   var keyCode=event.keyCode;
  139.   if(keyCode==AC_ENTER) keyCode=event.keyCode=AC_TAB;
  140.   if(keyCode==AC_TAB && theListDiv.selectedIndex!=-1) 
  141.   {
  142.    if(obj.value!=theListArray[theListDiv.selectedIndex]) obj.value=theListArray[theListDiv.selectedIndex];
  143.    return ;
  144.   }
  145.   
  146.   if(keyCode==AC_UP_ARROW && theListDiv.selectedItemIndex>0)
  147.   {
  148.    theListDiv.children[theListDiv.selectedItemIndex].className="ac_menuitem";
  149.    theListDivtheListDiv.selectedItemIndex=theListDiv.selectedItemIndex*1-1;
  150.    theListDivtheListDiv.selectedIndex=theListDiv.children[theListDiv.selectedItemIndex].value;
  151.    theListDiv.children[theListDiv.selectedItemIndex].className="ac_menuitem_selected";
  152.    adjustListDivScroll();
  153.   }
  155.   if(keyCode==AC_DOWN_ARROW && theListDiv.selectedItemIndex<theListDiv.children.length-1)
  156.   {
  157.    theListDiv.children[theListDiv.selectedItemIndex].className="ac_menuitem";
  158.    theListDivtheListDiv.selectedItemIndex=theListDiv.selectedItemIndex*1+1;
  159.    theListDivtheListDiv.selectedIndex=theListDiv.children[theListDiv.selectedItemIndex];
  160.    theListDiv.children[theListDiv.selectedItemIndex].className="ac_menuitem_selected";
  161.    adjustListDivScroll();
  162.   }
  164.  }
  166.  function htmlEncode(str)
  167.  {
  168.   if(str==null) return "";
  169.   strstr=str.replace(/</ig,"<")
  170.   strstr=str.replace(/>/ig,">");
  171.   strstr=str.replace(/"/ig,""");
  172.   return str;
  173.  }
  175.  function scrollListDivFun()
  176.  {
  177.   var virtualMoreItemsObj=theListDiv.children["virtualMoreItems"];
  178.   if(virtualMoreItemsObj==null) return;
  179.   var theLastVisibleIndex=virtualMoreItemsObj.value*1;
  180.   var objValue=theComboxObj.value;
  181.   var objValueHtml=htmlEncode(objValue);
  182.   var tempStr=new Array();
  183.   var numOfVisibleItems=virtualMoreItemsObj.itemIndex*1;
  184.   for(;theLastVisibleIndex<theListArray.length;theLastVisibleIndex++)
  185.   {
  186.    if(theListArray[theLastVisibleIndex].indexOf(objValue)==0)
  187.    {
  188.     if(numOfVisibleItems==203){
  189.      tempStr[numOfVisibleItems]="<DIV class=ac_menuitem  value="+theLastVisibleIndex+" itemIndex="+numOfVisibleItems+" onmousedown='replaceThisWithAllLeftItems(this);'><b>...Click to show all items...</b></DIV>";
  190.      numOfVisibleItems++;
  191.      break;
  192.     }
  193.     else{
  194.      tempStr[numOfVisibleItems]="<DIV class=ac_menuitem  value="+theLastVisibleIndex+" itemIndex="+numOfVisibleItems+"><b>"+objValueHtml+"</b>"+htmlEncode(theListArray[theLastVisibleIndex].substr(objValue.length))+"</DIV>";
  195.      numOfVisibleItems++;
  196.     }
  197.    }
  198.   }
  199.   virtualMoreItemsObj.outerHTML=tempStr.join("");
  200.  }
  202.  function replaceThisWithAllLeftItems(obj)
  203.  {
  204.   var virtualMoreItemsObj=obj;
  205.   if(virtualMoreItemsObj==null) return;
  206.   var theLastVisibleIndex=virtualMoreItemsObj.value*1;
  207.   var objValue=theComboxObj.value;
  208.   var objValueHtml=htmlEncode(objValue);
  209.   var tempStr=new Array();
  210.   var numOfVisibleItems=virtualMoreItemsObj.itemIndex*1;;
  211.   for(;theLastVisibleIndex<theListArray.length;theLastVisibleIndex++)
  212.   {
  213.    if(theListArray[theLastVisibleIndex].indexOf(objValue)==0)
  214.    {
  215.     tempStr[numOfVisibleItems]="<DIV class=ac_menuitem  value="+theLastVisibleIndex+" itemIndex="+numOfVisibleItems+"><b>"+objValueHtml+"</b>"+htmlEncode(theListArray[theLastVisibleIndex].substr(objValue.length))+"</DIV>";
  216.     numOfVisibleItems++;
  217.    }
  218.   }
  219.   virtualMoreItemsObj.outerHTML=tempStr.join("");
  220.   event.cancelBubble=true;
  221.  }
  224.  function mouseOverListDivFun(event)
  225.  {
  226.   if(event.toElement!=theListDiv) event.toElement.style.backgroundColor="#E6E6E6";
  227.  }
  229.  function mouseOutListDivFun(event)
  230.  {
  231.   if(event.fromElement!=theListDiv) event.fromElement.style.backgroundColor="";
  232.  }
  234.  function mouseDownListDivFun(event)
  235.  {
  236.   var selectedStr="";
  237.   if(event.srcElement==theListDiv) return;
  238.   else if(event.srcElement.tagName=="B") selectedStr=theListArray[event.srcElement.parentElement.value] ;
  239.   else selectedStr=theListArray[event.srcElement.value];
  240.   if(theComboxObj.value!=selectedStr)theComboxObj.value=selectedStr;
  241.   theComboxObj.blur();
  242.  }
  243.  function adjustListDivScroll()
  244.  {
  245.   if ( theListDiv==null || theListDiv.selectedItemIndex==-1 || theListDiv.children.length==0 ) return ;
  246.   var i=theListDiv.selectedItemIndex;
  247.   if((theListDiv.children[i].offsetTop<theListDiv.scrollTop)||(theListDiv.children[i].offsetTop>theListDiv.scrollTop+200))
  248.    theListDiv.children[i].scrollIntoView();
  249.  }
  251. </script>
  253. </head> 
  254. <body >
  256.   
  257. <form name="Compose" id="Compose" method=post action="/ym/Compose?YY=61185">
  258. <table cellpadding=4 cellspacing=0 border=0 width="100%">
  259. <tr>
  260. <td >Mail To:</td>
  261. <td style="padding-top:0px;" >
  262. <textarea name="To" class="minHeightTextarea" style="width:300" tabindex="1" id="tofield" 
  263. rows="1"  title="textarea" cols="20">深圳</textarea>
  264. </td>
  265. </tr>
  266. <tr>
  267. <td >Mail Cc:</td>
  268. <td style="padding-top:0px;" >
  269. <input name="Cc" style="width:300" tabindex="1" id="ccfield" value=a title="input">
  270. </td>
  271. </tr>
  272. <tr>
  273. <td colspan=2>测试页面<br>你可以输入"1"、"深圳"，就能看见效果<br>和Google有一点区别就是自己数据量大的话，这个是带滚动条的，但没有"XXX条结果"的效果</td>
  274. </tr>
  275. <tr>
  276. <td colspan=2>
  277. <br>
  278. <br>注1:EditableSelect4不是EditableSelect1的升级版，而是互补版，主要目的是想提高效率，支持3000或更多条选项，功能上有以下不同：
  279. <br>  a.可以达到，在3000或更多条选项选项时，反应时间在一秒内。
  280. <br>  b.输入长度大于0时才将过滤后的选项列出。
  281. <br>  c.先只列出可见的十条，scroll时列出200条，如果还有更多，让用户决定是否将所有的选项列出。
  282. <br>  d.舍弃“相等优先于相似”的功能。
  283. <br>
  284. <br>
  285. </td>
  286. </table>
  288. </form>
  289. </body>
  290. </html>  
andy1217
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java下拉菜单选择前弹提示框_javascript实现下拉提示选择框
weixin_35972359的博客
02-26 420
本文介绍了select和sugget结合起来使用的例子，支持下拉的直接选择，也支持在下拉内容中输入过滤。整体效果就是下面这样的：1、首先需要引入如下文件这里要注意jquery要放在select2的前面。2、一些实例Document.select2-dropdown {margin-left: 8px !important;margin-top: 20px !important;}这是单选例子Ala...
html输入框的下拉提示框,基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
weixin_39734074的博客
06-03 762
效果图代码部分// JavaScript Document(function($){$.fn.extend({"changeTips":function(value){value = $.extend({divTip:""},value)var $this = $(this);var indexLi = 0;//点击document隐藏下拉层$(document).click(function(e...
html搜索框下拉提示,仿谷歌google的搜索框下拉提示列表效果
weixin_42169245的博客
06-03 398
输入框提示列表效果 function showAndHide(obj,types){ var Layer=window.document.getElementById(obj); switch(types){ case "show": Layer.style.display="block"; break; case "hide": Laye...
php搜索框下拉提示框,jQuery搜索框输入文字下拉提示菜单
weixin_31232021的博客
03-26 149
控件有几个BUG：1、input输入后，点击选项，第一次点击无响应，原因是bind的change事件会在input失去焦点的时候触发，导致重新加载了选项，需要去掉change事件，改成input等事件即可解决 (相应的blur事件没有意义，需要这样的事件可以改到li.click事件中)2、在用keydown事件时，再用鼠标选择，第一次会出现css效果重叠，原因是没有在mouseenter事件中加入...
html搜索框下拉提示,jQuery搜索框输入文字下拉提示菜单
weixin_28738983的博客
06-03 407
jQuery搜索框输入文字下拉提示菜单*{margin: 0;padding: 0;list-style: none;border: none;}body{font-family: "microsoft yahei"!important;background-color: #43e4e3;}h2{display: block;font-size: 1.3em;-webkit-margin-befo...
php实现输入框下拉提示框,输入框自动下拉补全（仿百度、谷歌搜索框提示）
weixin_34487308的博客
03-12 363
New Document /*自动下拉补全 zhk */var highlightindex=-1;//当前高亮的节点$(document).ready(function(){var wordInput=$("#word");var wordInputOffset=wordInput.offset();$("#auto").hide().css("border","1px black solid...
java下拉出现数据提示_使用ajax实现百度下拉提示框
weixin_39608301的博客
02-27 187
百度下拉提示框在使用百度搜索时，在输入框中输入部分文字后，下面会将与该文字相关的词组展示出来，该功能就可以使用ajax来实现。注册输入框的onkeyup事件，该事件触发时，将输入框中填写的内容使用ajax发送到servlet中，在servlet中根据用户的输入去数据库中查询，之后将查询出的数据再发送给前台中，最后将该数据展示在页面即可。代码示例：定义html：style="display: non...
php实现输入框下拉提示框,实时监控input框,实现输入框与下拉框联动的实例
weixin_29816241的博客
03-12 218
如图：html代码奖励类型：---请选择---{foreach $reward as $value}{$value['material_name']}{/foreach}JQuery代码$('#reward').bind('input propertychange', function() {reward();});function reward(){var search = $("#reward...
input去除默认值和下拉提示框
ganle的博客
01-13 2321
一、去input除默认值： <input type="text" id="inputId" name="inputName" onfocus="if (value==defaultValue)value=''" onblur="if(!value)value=defaultValue" /> 二、去除input下拉提示框 <form autocomplete="...
html页面悬浮提示框,js实现页面悬浮框
weixin_29248611的博客
06-04 4502
当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用.当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示..div1 {height:2000px;}.div2 {width:%;height:35px;background-color:#3399FF;margin-top:100px;}.div2_1{position:fixed;wi...
javascript实现下拉提示选择框
10-23
主要介绍了javascript实现下拉提示选择框的相关资料,需要的朋友可以参考下
php+ajax做仿百度搜索下拉自动提示框(有实例)
10-27
php+mysql+ajax实现百度搜索下拉提示框 主要有3个文件三个文件在同一个目录里 如下图 下面是三个文件的代码 把sql文件导入到mysql数据库里 修改下数据库密码为自己的 记得哦是UTF-8编码
JavaScript 文本框下拉提示(自动提示)
10-28
CSS定义了页面布局和提示框的样式，包括输入框的宽度、高度、边框、内边距，以及下拉提示框的样式，如边框颜色、位置、溢出处理、列表项的样式和当前选中项的背景色。 JavaScript 部分： ```javascript ...
仿google提示框 下拉提示框
11-30
"仿Google提示框"和"下拉提示框"就是一种常见的UI设计元素，广泛应用于搜索引擎、输入法和其他需要提供智能建议的应用场景。这些提示框的设计灵感通常来源于Google的搜索框，它能在用户输入时提供即时的下拉建议，...
可选择和输入的下拉列表框示例
09-04
在网页设计和开发中，创建一个既可选择又可输入的下拉列表框可以提供用户更灵活的交互体验。这样的设计允许用户在预设的选项中选择，同时也可以自定义输入他们自己的值。这种功能通常用于那些可能有固定选项但又允许...
b050闲置图书分享-springboot+vue+elementui.zip（可运行源码+sql文件+文档）
07-23
本次开发的闲置图书分享平台实现了收货地址管理、字典管理、公告管理、留言板管理、图书管理、图书收藏管理、图书评价管理、图书订单管理、用户管理、管理员管理等功能。系统用到了关系型数据库中王者MySql作为系统的数据库，有效的对数据进行安全的存储，有效的备份，对数据可靠性方面得到了保证。并且程序也具备程序需求的所有功能，使得操作性还是安全性都大大提高，让闲置图书分享平台更能从理念走到现实，确确实实的让人们提升信息处理效率。 管理图书的数据，此页面主要实现图书的增加、修改、删除、查看的功能。公告信息管理页面提供的功能操作有：新增公告，修改公告，删除公告操作。公告类型管理页面显示所有公告类型，在此页面既可以让管理员添加新的公告信息类型，也能对已有的公告类型信息执行编辑更新，失效的公告类型信息也能让管理员快速删除。
《大学生职业生涯规划与就业指导》大一阶段课程作业
最新发布
07-24
《大学生职业生涯规划与就业指导》大一阶段课程作业
开题报告潮汕特产直销系统 已通过开题答辩的.doc
07-23
随着互联网的高速发展，人们的生活方式发生了翻天覆地的变化，在过去，人们想要购买很远地方的东西会非常麻烦，因为是通信和交通都不是十分的方便，而现在网络购物成为了人们日常生活中不可或缺的一部分。在这样的背景下，互联网与传统行业的融合已经成为了一种不可阻挡的趋势。对于中国特色的潮汕特产来说，这一趋势也带来了巨大的变革和发展机遇[1]。
Python性能优化：掌握性能分析工具的实战指南
07-23
Python是一种广泛使用的高级编程语言，由Guido van Rossum于1989年底发明，第一个公开发行版发行于1991年。Python的设计哲学强调代码的可读性和简洁的语法（尤其是使用空格缩进来区分代码块，而不是使用大括号或关键词）。这使得Python被认为是一种易于学习的语言，同时具备强大的功能，适合初学者和经验丰富的程序员。 Python的主要特点包括： 1. **易于学习**：Python有相对较少的关键字，结构简单，和一个明确定义的语法。 2. **易于阅读**：Python代码定义的清晰度使得它像可执行伪代码。 3. **易于维护**：Python的成功在于它的源代码是相当容易维护的。 4. **广泛的标准库**：Python的标凑库很庞大，包含用于互联网通信、网络通信、数据压缩、加密、系统管理等的模块。 5. **跨平台**：Python可以在多种操作系统上运行，包括但不限于Windows、Mac OS X、Linux等。 6. **解释型语言**：Python是一种解释型语言，这意味着开发过程中没有编译步骤。 7. **动态类型系统**：Python不会在编写
css里搜索框怎么设置下拉菜单提示信息
06-06
3. 将下拉菜单提示框设置为绝对定位，并设置其 `top` 和 `left` 属性，使其显示在搜索框下方。 4. 最后，设置下拉菜单提示框的样式，例如背景色、边框等。 下面是一个示例代码： ```html 请输入搜索关键字"> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值