使用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支持firefox,ie7页面布局拖拽效果代码
Dec 20 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
Dec 12 Javascript
js取消单选按钮选中示例代码
Nov 14 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
jQuery验证插件validation使用指南
Apr 21 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
深入学习Vue nextTick的用法及原理
Oct 08 Javascript
vue实现计算器功能
Feb 22 Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 Javascript
深入浅析React中diff算法
May 19 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实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
jquery select选中的一个小问题
2009/10/11 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
简单谈谈javascript中的变量、作用域和内存问题
2015/08/30 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
Python下线程之间的共享和释放示例
2015/05/04 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
python实时分析日志的一个小脚本分享
2017/05/07 Python
python使用wxpy轻松实现微信防撤回的方法
2019/02/21 Python
python操作redis数据库的三种方法
2020/09/10 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
林清轩官方网站:山茶花润肤油开创者
2016/10/26 全球购物
印度尼西亚最大的电商平台:Tokopedia(印尼版淘宝)
2017/12/02 全球购物
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
香港士多网上超级市场:Ztore
2021/01/09 全球购物
白岩松演讲
2014/05/21 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
农行心得体会
2014/09/02 职场文书
教师拔河比赛广播稿
2014/10/14 职场文书
出纳岗位职责
2015/01/31 职场文书
2015年林业工作总结
2015/05/14 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书
golang特有程序结构入门教程
2021/06/02 Python
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript