使用jquery实现仿百度自动补全特效


Posted in Javascript onJuly 23, 2015

新建index.html文件,直接复制下面代码到新建的文件index.html里面,用浏览器访问,仅用于参考:

<!doctype html>
<html>
<meta charset="utf-8">
<style>
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.auto_hidden {
width:204px;border-top: 1px solid #333;
border-bottom: 1px solid #333;
border-left: 1px solid #333;
border-right: 1px solid #333;
position:absolute;
display:none;
}
.auto_show {
width:204px;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
border-left: 1px solid #333;
border-right: 1px solid #333;
position:absolute;
z-index:9999; /* 设置对象的层叠顺序 */
display:block;
}
.auto_onmouseover{
color:#ffffff;
background-color:highlight;
width:100%;
}
.auto_onmouseout{
color:#000000;
width:100%;
background-color:#ffffff;
}
</style>
<script language="javascript">
<!--
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
}
var Bind = function(object, fun) {
return function() {
return fun.apply(object, arguments);
}
}
function AutoComplete(obj,autoObj,arr){
this.obj=$(obj); //输入框
this.autoObj=$(autoObj);//DIV的根节点
this.value_arr=arr; //不要包含重复值
this.index=-1; //当前选中的DIV的索引
this.search_value=""; //保存当前搜索的字符
}
AutoComplete.prototype={
//初始化DIV的位置
init: function(){
this.autoObj.style.left = this.obj.offsetLeft + "px";
this.autoObj.style.top = this.obj.offsetTop + this.obj.offsetHeight + "px";
this.autoObj.style.width= this.obj.offsetWidth - 2 + "px";//减去边框的长度2px
},
//删除自动完成需要的所有DIV
deleteDIV: function(){
while(this.autoObj.hasChildNodes()){
this.autoObj.removeChild(this.autoObj.firstChild);
}
this.autoObj.className="auto_hidden";
},
//设置值
setValue: function(_this){
return function(){
_this.obj.value=this.seq;
_this.autoObj.className="auto_hidden";
}
},
//模拟鼠标移动至DIV时,DIV高亮
autoOnmouseover: function(_this,_div_index){
return function(){
_this.index=_div_index;
var length = _this.autoObj.children.length;
for(var j=0;j<length;j++){
if(j!=_this.index ){
_this.autoObj.childNodes[j].className='auto_onmouseout';
}else{
_this.autoObj.childNodes[j].className='auto_onmouseover';
}
}
}
},
//更改classname
changeClassname: function(length){
for(var i=0;i<length;i++){
if(i!=this.index ){
this.autoObj.childNodes[i].className='auto_onmouseout';
}else{
this.autoObj.childNodes[i].className='auto_onmouseover';
this.obj.value=this.autoObj.childNodes[i].seq;
}
}
}
,
//响应键盘
pressKey: function(event){
var length = this.autoObj.children.length;
//光标键"↓"
if(event.keyCode==40){
++this.index;
if(this.index>length){
this.index=0;
}else if(this.index==length){
this.obj.value=this.search_value;
}
this.changeClassname(length);
}
//光标键"↑"
else if(event.keyCode==38){
this.index--;
if(this.index<-1){
this.index=length - 1;
}else if(this.index==-1){
this.obj.value=this.search_value;
}
this.changeClassname(length);
}
//回车键
else if(event.keyCode==13){
this.autoObj.className="auto_hidden";
this.index=-1;
}else{
this.index=-1;
}
},
//程序入口
start: function(event){
if(event.keyCode!=13&&event.keyCode!=38&&event.keyCode!=40){
this.init();
this.deleteDIV();
this.search_value=this.obj.value;
var valueArr=this.value_arr;
valueArr.sort();
if(this.obj.value.replace(/(^\s*)|(\s*$)/g,'')==""){ return; }//值为空,退出
try{ var reg = new RegExp("(" + this.obj.value + ")","i");}
catch (e){ return; }
var div_index=0;//记录创建的DIV的索引
for(var i=0;i<valueArr.length;i++){
if(reg.test(valueArr[i])){
var div = document.createElement("div");
div.className="auto_onmouseout";
div.seq=valueArr[i];
div.onclick=this.setValue(this);
div.onmouseover=this.autoOnmouseover(this,div_index);
div.innerHTML=valueArr[i].replace(reg,"<strong>$1</strong>");//搜索到的字符粗体显示
this.autoObj.appendChild(div);
this.autoObj.className="auto_show";
div_index++;
}
}
}
this.pressKey(event);
window.onresize=Bind(this,function(){this.init();});
}
}
//-->
</script>
<body>
<div align="center" style="padding-top:50px">
<input type="text" style="width:300px;height:20px;font-size:14pt;" placeholder="请输入a或b模拟效果" id="o" onkeyup="autoComplete.start(event)">
</div>
<div class="auto_hidden" id="auto"><!--自动完成 DIV--></div>
<script>
var autoComplete=new AutoComplete('o','auto',['b0','b12','b22','b3','b4','b5','b6','b7','b8','b2','abd','ab','acd','accd','b1','cd','ccd','cbcv','cxf']);
</script>
</body>
</html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JQuery实现的在新窗口打开链接的方法小结
Apr 22 Javascript
Webkit的跨域安全问题说明
Sep 13 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
分析JS单线程异步io回调的特性
Dec 01 Javascript
详解Vue打包优化之code spliting
Apr 09 Javascript
Vue.js 利用v-for中的index值实现隔行变色
Aug 01 Javascript
vue.js配合$.post从后台获取数据简单demo分享
Aug 11 Javascript
js使用swiper实现层叠轮播效果实例代码
Dec 12 Javascript
vue+高德地图写地图选址组件的方法
May 18 Javascript
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
代码分析jQuery四种静态方法使用
Jul 23 #Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
Jul 22 #Javascript
HTML5实现留言和回复页面样式
Jul 22 #Javascript
javascript控制层显示或隐藏的方法
Jul 22 #Javascript
javascript实现简单查找与替换的方法
Jul 22 #Javascript
javascript数组随机排序实例分析
Jul 22 #Javascript
JavaScript对数组进行随机重排的方法
Jul 22 #Javascript
You might like
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
PHP5.3安装Zend Guard Loader图文教程
2014/09/29 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
Python contextlib模块使用示例
2015/02/18 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
python实现共轭梯度法
2019/07/03 Python
python实现批量命名照片
2020/06/18 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
德国旅游网站:weg.de
2018/06/03 全球购物
大学生职业生涯规划书的基本内容
2014/01/06 职场文书
大学生社会实践评语
2014/04/25 职场文书
南京青奥会口号
2014/06/12 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
销售经理岗位职责
2015/01/31 职场文书
关于Numpy之repeat、tile的用法总结
2021/06/02 Python
Sql Server之数据类型详解
2022/02/28 SQL Server
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫