使用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 相关文章推荐
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
Jun 18 Javascript
jQuery 1.5最新版本的改进细节分析
Jan 19 Javascript
autoIMG 基于jquery的图片自适应插件代码
Mar 12 Javascript
editable.js 基于jquery的表格的编辑插件
Oct 24 Javascript
删除条目时弹出的确认对话框
Jun 05 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
非常实用的12个jquery代码片段
Nov 02 Javascript
vue-resource 拦截器(interceptor)的使用详解
Jul 04 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
vue实现简单loading进度条
Jun 06 Javascript
jQuery实现视频展示效果
May 30 jQuery
使用vue判断当前环境是安卓还是IOS
Apr 12 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
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
一个用js实现控制台控件的代码
2007/09/04 Javascript
js函数的延迟加载实现代码
2012/10/11 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
2017/01/11 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
jQuery 选择器用法基础入门示例
2020/01/04 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
python 获取本机ip地址的两个方法
2013/02/25 Python
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
公司薪酬管理制度
2014/01/31 职场文书
班级活动策划书
2014/02/06 职场文书
疾病防治方案
2014/05/31 职场文书
重点工程汇报材料
2014/08/27 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
医院护士工作检讨书
2014/10/26 职场文书
店铺转让协议书
2014/12/02 职场文书
辞职信的写法
2015/02/27 职场文书
python字典的元素访问实例详解
2021/07/21 Python
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python
Java服务调用RestTemplate与HttpClient的使用详解
2022/06/21 Java/Android