JS实现在文本框输入时自动弹出相关内容提示

原创 2015年11月19日 15:02:01
<!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>简单的模拟类似新浪微博搜索框的效果 站长学院  www.pigzz.com</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>
    站长学院 代码测试专用  www.pigzz.com
    <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>

开发日志:js当文本框输入非中文字符时,提示只能输入中文并将非中文字符清空【兼容IE、FF,适用于当文本框内容改变就立刻触发事件的其他功能性需求】

项目需要实现一个功能,要求 1文本框只能输入中文 2输入非中文提示,并清空非中文字符 在实现过程中遇到了不少问题 首先,实现了将一个字符串中所有非中文字符清空的功能 obj.value=obj.va...

js控制文本框输入的内容为(数字、字母、汉字)(一、js在控件中实现)

原文转载自脚本之家 http://www.jb51.net/article/51102.htm 这篇文章主要分享下js代码限制文本框中只能输入数字的多个实例,学习下js控制文本框中输入...

文本框输入内容提示消失的两种实现

第一种方法: 基于HTML5 input标签的新特性 - placeholder 。另外,x-webkit-speech 属性可以实现语音输入功能。 1 div>input type="em...

js控制文本框输入内容

在js中用正则表达式对象(RegExp)判断 中文  ^[\u0391-\uFFE5]+$ 英文  ^[A-Za-z]+$ 中文和英文 /^[\u0391-\uFFE5A-Za-z]+$/...
  • hgm1993
  • hgm1993
  • 2016年08月14日 16:52
  • 128

文本框输入时 实现自动提示(像百度、google一样)

引用上面的文件                           var keyValues = [];               var goodsAutoComp...

Javascript实现文本框输入提示

  • 2013年04月13日 09:52
  • 2KB
  • 下载

基于ajax文本框自动填写相关内容

  • 2011年03月21日 15:50
  • 1.62MB
  • 下载

实现类似google搜索效果,文本框输入智能提示,没有用ajax控件和第三方控件,完全手写代码

前台页面代码:
  • wdywqc
  • wdywqc
  • 2011年04月12日 10:18
  • 1986

文本框输入即时显示内容 例子

  • 2009年02月27日 15:31
  • 6KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS实现在文本框输入时自动弹出相关内容提示
举报原因:
原因补充:

(最多只允许输入30个字)