Jquery中文网 www.jquerycn.cn
jQuery 教程 | jQuery ui教程 |
Jquery中文网 >  脚本编程  >  javascript  >  正文 js 仿goolge baidu 文本框下拉提示效果

js 仿goolge baidu 文本框下拉提示效果

发布时间：2017-03-09   编辑：www.jquerycn.cn
jquery中文网为您提供js 仿goolge baidu 文本框下拉提示效果等资源，欢迎您收藏本站，我们将为您提供最新的js 仿goolge baidu 文本框下拉提示效果资源
js 仿goolge baidu 文本框下拉提示效果
提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> html{overflow:-moz-scrollbars-vertical;} body{padding:0;margin:0;font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif;} body,h1,p,blockquote,dl,dt,dd,ul,ol,li,input{margin:0;padding:0;} button,input,select,textarea {font:12px/1.5 tahoma,arial,simsun,sans-serif;} button,input,select,textarea{font-size:100%;} a{text-decoration:none;} a:hover{text-decoration:underline;} #wrap{width:650px;margin:0 auto;} .txt{width:210px;height:25px;border:1px solid #ccc;line-height:25px;padding:0 5px;} .autoDis{border:1px solid #999;position:absolute;overflow:hidden;} .autoDis p{line-height:25px;cursor:default;padding:0 5px;} .autoDis li{line-height:25px;cursor:default;padding:0 5px;background-color:#fff;} .autoDis .cur{background:#ccc;} </style> </head> <body>

提示：可以输入"1"开头的

<script type="text/javascript"> (autoComplete={ pop_len:10, pop_cn:'autoDis', hover_cn:'cur', source:'13612345564|13825646464|13412236054|13012348564|13012345564|13012365564|彭小|王达|李相公|周欢欢'.split('|'), init:function(){ this.setDom(); return this; }, bind:function(x){ if(x.getAttribute('type') != 'text' || x.nodeName != 'INPUT') return null; var self = this; x.onkeyup = function(e){ e = e || window.event; var lis = self.pop.getElementsByTagName('li'),lens = self.pop.getElementsByTagName('li').length,n=lens,temp; if(e.keyCode == 38){ //键盘up键被按下 if(self.pop.style.display != 'none'){ for(var i=0;i<lens;i ){ //遍历结果数据，判断是否被选中 if(lis[i].className) temp = i; else n--; } if(n==0){ //如果没有被选中的li元素，则选中最后一个 lis[lens-1].className = self.hover_cn; this.value = lis[lens-1].innerHTML; }else{ //如果有被选中的元素，则选择上一个元素并赋值给input if(lis[temp] == lis[0]){ //如果选中的元素是第一个孩子节点则跳到最后一个选中 lis[lens-1].className = self.hover_cn; this.value = lis[lens-1].innerHTML; lis[temp].className = ''; }else{ lis[temp-1].className = self.hover_cn; this.value = lis[temp-1].innerHTML; lis[temp].className = ''; } } }else //如果弹出层没有显示则执行插入操作，并显示弹出层 self.insert(this); }else if(e.keyCode == 40){ //down键被按下，原理同up键 if(self.pop.style.display != 'none'){ for(var i=0;i
提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
js 仿goolge baidu 文本框下拉提示效果
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
js仿baidu google 实用的文本框内容自动完成效果
仿百度的关键词匹配搜索示例
js 鼠标悬浮时出现下拉框的效果代码
前端框架-弹窗的研究
js实现下拉框菜单插件(特别推荐)
jquery easyui自定义下拉框列表
jQuery仿照新浪微博提示框（确认框）
JavaScript 实例

上一篇：css 图片立体边框代码效果 下一篇：js 网页密码强弱度检测
[关闭]
最近更新
浏览排行

关于本站 | 网站地图 | 联系我们 | 免责声明 | 友情链接
CopyRight © 2010-2014 jQeury中文网 jquerycn.cn , All Rights Reserved.