使用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 相关文章推荐
JS实现日期加减的方法
Nov 29 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
基于jQuery实现的文字按钮表单特效整理
Dec 07 Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 Javascript
Javascript创建类和对象详解
May 31 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
JavaScript Date对象应用实例分享
Oct 30 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
May 02 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 Javascript
手把手教你从零开始react+antd搭建项目
Jun 03 Javascript
代码分析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
PHP 变量定义和变量替换的方法
2009/07/30 PHP
php 保留字列表
2012/10/04 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
javascript作用域和闭包使用详解
2014/04/25 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
js生成随机数的方法实例
2015/10/16 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
2015/11/15 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
[02:05]DOTA2完美大师赛趣味视频之看我表演
2017/11/18 DOTA
python在linux中输出带颜色的文字的方法
2014/06/19 Python
python清除字符串里非字母字符的方法
2015/07/02 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
python打造爬虫代理池过程解析
2019/08/15 Python
python安装本地whl的实例步骤
2019/10/12 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
职务聘任书范文
2014/03/29 职场文书
2014年调度员工作总结
2014/11/19 职场文书
实习护士自荐信
2015/03/25 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
Python的三个重要函数详解
2022/01/18 Python