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实现输入框动态提示信息

为了提高和用户的交互性,现在的输入框往往都采用输入信息自动提示的功能,类似于百度输入框中的提示功能。 设计思路是:在输入框input的组件下面放置一个div,这个div主要是为了提示信息的展示功能,类...
  • linzhiqiang0316
  • linzhiqiang0316
  • 2016-07-20 16:04:52
  • 8056

javascript 一个文本框输入完毕后自动跳转到下一个文本框的方法

js24.html --> function moveNext(object,index){ if(objec...
  • csdt_csdt
  • csdt_csdt
  • 2013-09-16 21:29:27
  • 4469

文本框输入后立即触发事件

文本框输入事件:onchange 、onkeyup 、onblur onchange在用于文本框输入框时,有一个明显的不足. 事件不会随着文字的输入而触发,而是等到文本框失去焦点(onblur)时才会...
  • meizhiyun
  • meizhiyun
  • 2013-11-27 12:14:15
  • 99083

简单的js+css的输入框自动提示功能实现

由于原来项目需求做了一个基于百度的suggest的提示功能,直接调用的百度的suggest功能,能够实现与百度搜索一样的提示效果。最近需要在一个简单的输入框中加一个提示功能,大概就是后台把数据传到前台...
  • jayson1001
  • jayson1001
  • 2017-06-09 18:09:11
  • 1211

autocomplete.js 输入框,自动提示

百度 酷狗,反正使用搜索功能时,都会看到类似于图一这种自动补全的功能,灰常的方便,今天做一个项目,刚好要加这个功能,于是一通百度之后,总算做出来,源代码在文章末尾会提供下载。还有,我这个是参考了网上的...
  • u014704496
  • u014704496
  • 2014-07-28 10:46:38
  • 2333

简单JS自动提示文本框

1、建立框架结构: Color: 2、页面和表单CSS:
  • jaray
  • jaray
  • 2012-07-28 02:08:10
  • 2129

在输入框输入数据时,自动提示与输入相关的数据

以下是在输入框输入数据时,自动提示与输入相关的数据,数据从数据库中查询的: 【HTML部分】 退货配送人: 请在此输入退货...
  • u011019141
  • u011019141
  • 2016-01-29 18:00:59
  • 1200

input自动填充-Autocomplete

首先
  • linlinv3
  • linlinv3
  • 2014-08-12 15:54:40
  • 32585

js根据输入内容自动填充下拉框

这是AJAX的典型应用之一,即根据用户在输入框内输入的内容来搜索数据库,然后把内容显示出来,当然不一定非要显示在下拉框中,也可以放在其它的地方,我们这里只是把搜索到的内容填充到下拉框中,以便用户精确定...
  • fengxinzi_jing
  • fengxinzi_jing
  • 2012-10-10 13:28:52
  • 5601

js 实现在离开页面时提醒未保存的信息(减少用户重复操作)

$(function(){ var changeConent=false; //文本框内容改变 $("#userName").change(function(){ changeConent=...
  • xiebiaoling
  • xiebiaoling
  • 2013-10-24 18:05:28
  • 952
收藏助手
不良信息举报
您举报文章:JS实现在文本框输入时自动弹出相关内容提示
举报原因:
原因补充:

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