使用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 获取对象 基本选择与层级
May 31 Javascript
原生js实现shift/ctrl/alt按键的获取
Apr 08 Javascript
JS按字节截取字符长度实例
Nov 20 Javascript
parentElement,srcElement的使用小结
Jan 13 Javascript
JS判断变量是否为空判断是否null
Jul 25 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
可能被忽略的一些JavaScript数组方法细节
Feb 28 Javascript
微信小程序文章详情功能完整实例
Jun 03 Javascript
vue实现tab栏点击高亮效果
Aug 19 Javascript
vue实现树状表格效果
Dec 29 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
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
Javascript中string转date示例代码
2013/11/01 Javascript
JavaScript学习笔记之JS事件对象
2015/01/22 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
完善的jquery处理机制
2016/02/21 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
新手快速入门JavaScript装饰者模式与AOP
2019/06/24 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
python中日志logging模块的性能及多进程详解
2017/07/18 Python
Python List cmp()知识点总结
2019/02/18 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
美国性感内衣店:Yandy
2018/06/12 全球购物
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
办加油卡单位介绍信
2014/01/09 职场文书
青年志愿者事迹材料
2014/02/07 职场文书
生日宴会主持词
2014/03/20 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
男方家长婚礼答谢词
2015/09/29 职场文书