编程 Javascript

JS+CSS实现仿新浪微博搜索框的方法

Posted in Javascript onFebruary 24, 2015

本文实例讲述了JS+CSS实现仿新浪微博搜索框的方法。分享给大家供大家参考。具体实现方法如下：

<!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>JS+CSS仿类似新浪微博搜索框的效果</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>

希望本文所述对大家的javascript程序设计有所帮助。

JS+CSS实现仿新浪微博搜索框的方法

- Author -

代码家园

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery EasyUI 中文API Button使用实例

Apr 14 Javascript

使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法

Apr 07 Javascript

js限制文本框输入长度两种限制方式(长度、字节数)

Dec 19 Javascript

表格单元格交错着色实现思路及代码

Apr 01 Javascript

jQuery on方法传递参数示例

Dec 09 Javascript

关于js里的this关键字的理解

Aug 17 Javascript

JavaScript字符串对象(string)基本用法示例

Jan 18 Javascript

JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】

Jan 22 Javascript

微信小程序小组件基于Canvas实现直播点赞气泡效果

May 29 Javascript

jQuery图片查看插件Magnify开发详解

Dec 25 jQuery

简述pm2常用命令集合及配置文件说明

May 30 Javascript

使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法

Sep 09 Javascript

JS实现让访问者自助选择网页文字颜色的方法

Feb 24 #Javascript

JS给超链接加确认对话框的方法

Feb 24 #Javascript

javascript实现图片循环渐显播放的方法

Feb 24 #Javascript

javascript感应鼠标图片透明度显示的方法

Feb 24 #Javascript

javascript文本框内输入文字倒计数的方法

Feb 24 #Javascript

jQuery实现感应鼠标动画效果自动伸长的输入框实例

Feb 24 #Javascript

JS实现超过长度限制后自动跳转下一款文本框的方法

Feb 23 #Javascript

You might like

php漏洞之跨网站请求伪造与防止伪造方法

2013/08/15 PHP

PHP输出缓存ob系列函数详解

2014/03/11 PHP

PHP处理二进制数据的实现方法

2016/06/13 PHP

jQuery学习3：操作元素属性和特性

2010/02/07 Javascript

GWT中复制到剪贴板 js+flash实现复制兼容性比较好

2010/03/07 Javascript

使用JavaScript检测Firefox浏览器是否启用了Firebug的代码

2010/12/28 Javascript

通过js简单实现将一个文本内容转译成加密文本

2013/10/22 Javascript

jQuery中$.fn的用法示例介绍

2013/11/05 Javascript

javascript顺序加载图片的方法

2015/07/18 Javascript

jquery实现表单输入时提示文字滑动向上效果

2015/08/10 Javascript

详解JavaScript函数

2015/12/01 Javascript

基于JavaScript实现智能右键菜单

2016/03/02 Javascript

Knockoutjs 学习系列(一)ko初体验

2016/06/07 Javascript

JavaScript SHA-256加密算法详细代码

2016/10/06 Javascript

用 js 的 selection range 操作选择区域内容和图片

2017/04/18 Javascript

详解如何构建Angular项目目录结构

2017/07/13 Javascript

vue.js或js实现中文A-Z排序的方法

2018/03/08 Javascript

vue-cli的工程模板与构建工具详解

2018/09/27 Javascript

element-ui多文件上传的实现示例

2019/04/10 Javascript

用Python实现协同过滤的教程

2015/04/08 Python

python实现按任意键继续执行程序

2016/12/30 Python

Python实现爬虫设置代理IP和伪装成浏览器的方法分享

2018/05/07 Python

python中sys.argv函数精简概括

2018/07/08 Python

Python3单行定义多个变量或赋值方法

2018/07/12 Python

python list转矩阵的实例讲解

2018/08/04 Python

python中dict字典的查询键值对遍历排序创建访问更新删除基础操作方法

2018/09/13 Python

django的settings中设置中文支持的实现

2019/04/28 Python

Python实现PyPDF2处理PDF文件的方法示例

2019/09/25 Python

python 实现方阵的对角线遍历示例

2019/11/29 Python

Python实现对adb命令封装

2020/03/06 Python

python 制作简单的音乐播放器

2020/11/25 Python

html5+css3之动画在webapp中的应用

2014/11/21 HTML / CSS

HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍

2013/01/31 HTML / CSS

Kneipp克奈圃美国官网：德国百年精油配方的传承

2018/02/07 全球购物

房屋产权证明书

2014/10/15 职场文书

vue实现input输入模糊查询的三种方式

2022/08/14 Vue.js