<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>CSS+JS模拟类似新浪微博搜索框的搜索提示效果</title> <style type="text/css"> * { padding:0; margin:0;} body { font-size:14px; } #box { width:600px; margin:40px auto;} #in { width:240px; height:24px; line-height:24px; border:1px solid #369; border-radius:4px; box-shadow:inset 0 0 2px #999; } #suggest { display:none; position:relative; margin-top:-1px; width:240px; padding-top:1px; border:1px solid #369; border-top:0 none; border-radius:4px; box-shadow:inset 0 0 2px #999; overflow:hidden; } #suggest a { display:block; color:#f00; height:24px; line-height:24px; text-decoration:none; padding:0 4px;} #suggest a:hover { background:#eee;} #suggest a span { color#369;} </style> <script type="text/javascript"> window.onload=function(){ //声明一坨变量供下面使用 var obox=document.getElementById("box"); obj=document.getElementById("in"); osug=document.getElementById("suggest"); oa=osug.getElementsByTagName("span"); //兼容ie和火狐浏览器的方式,但是经测试发现ie678可以ie9却不行在删除的时候无法触发,网上查下说有ie9这个问题 obj.oninput=obj.onpropertychange=onchange; function onchange(){ var txt=this.value; var words=txt.length; if(words==0){ osug.style.display="none"; }else if(words<=8){ osug.style.display="block"; for( var i=0;len=oa.length,i<len;i++){ oa[i].innerHTML=txt; } }else if(words>8){ osug.style.display="block"; var limit=txt.substring(0,8)+"..."; for( var i=0;len=oa.length,i<len;i++){ oa[i].innerHTML=limit; } } } } function disbox(){ document.getElementById("suggest").style.display="none"; } </script> </head> <body> <dl id="box"> <dt><input onblur="disbox()" type="text" name="" id="in" /></dt> <dd id="suggest" > <a href="###">搜“<span></span>”相关微博</a> <a href="###">搜“<span></span>”相关用户</a> </dd> </dl> </body> </html> <br>在输入框中输入文字查看预览效果`<br><hr><p align="center"><font color=black>本特效由 <a target="_blank" href="http://www.daimajiayuan.com" target="_blank">代码家园</a>丨 收集于互联网,只为兴趣与学习交流,不作商业用途。来源:代码家园</font></p> 运行代码 复制代码 另存代码 提示:可以先修改部分代码后再运行 转载请注明:代码家园 » CSS+JS模拟类似新浪微博搜索框的搜索提示特效 继续浏览有关 的文章 上一篇:JS实现鼠标点击展开/隐藏表格行 下一篇:JS控制消除文本框中的空格符号 相关代码 JS实现很酷的EMAIL地址添加功能 JS控制超过长度限制后自动跳转下一款文本框 JS+CSS打造实用的单击输入框弹出选择框特效 JS实现自适应高度的表单文本框 + 两种Select下拉列表跳转菜单 + CSS+JS仿类似新浪微博搜索框的特效 + jQuery仿googleDocs在线文档的表格插入特效 + CSS美化的按钮样式,感应鼠标更换边框颜色 + 复选框限制,超过限制即弹出警告框 + 只能点击一次的按钮,提交后变成灰色不可再次 + JS+CSS实现可以凹陷显示选中的单元格 + jQuery+css模拟select控件的左边移动到右边的功能 + CSS+JS模拟类似新浪微博搜索框的搜索提示特效 + JS控制消除文本框中的空格符号 + JS记住密码复选框上的提示框 + 文本框内输入文字倒计数特效