点滴积累【JS】---JS实现仿百度模糊搜索效果
效果：
HTML代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="InputText.aspx.cs" Inherits="DropDownLikeBaiDu.InputText" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="input.js" type="text/javascript"></script>
</head>
<body style=" background-color:green">
<form id="form1" runat="server">
<div style="margin-left: 300px; margin-top: 300px;">
青苹果搜索：
<input type="text" id="SearchID" onfocus="javascript:if(this.value=='请输入内容')this.value='';"
onkeyup="autoComplete.start(event)" onblur="javascript:if(this.value=='')this.value='请输入内容';" />
<div class="auto_hidden" style="margin-left:100px; background-color:white" id="SearchLike">
<!--自动完成 DIV-->
</div>
</div>
</form>
</body>
<script>
var get_ID = document.getElementById("SearchID");
var get_Like = document.getElementById("SearchLike");
var autoComplete = new AutoComplete(get_ID, get_Like, ['中国', '中南海', '青苹果', '青菜', '青茶', '博客园', '博士', '博大精深']);
</script>
</html>
JS代码：
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 style=\"background-color:red\">$1</strong>");
this.autoObj.appendChild(div);
this.autoObj.className = "auto_show";
div_index++;
}
}
}
this.pressKey(event);
window.onresize = Bind(this, function () { this.init(); });
}
}
Demo下载：
http://files.cnblogs.com/files/xinchun/DropDownLikeBaiDu.zip
点滴积累【JS】---JS实现仿百度模糊搜索效果的更多相关文章
- 利用autocomplete.js实现仿百度搜索效果（ajax动态获取后端[C#]数据）
实现功能描述: 1.实现搜索框的智能提示 2.第二次浏览器缓存结果 3.实现仿百度搜索 <!DOCTYPE html> <html xmlns="http://www.w3 ...
- 点滴积累【JS】---JS实现动画闪烁效果
效果: 思路:首先获得图片数组,然后做JS定时用setTimeout和setInterval在用显示隐藏实现闪烁效果. 代码: <!DOCTYPE html PUBLIC "-//W3 ...
- 点滴积累【JS】---JQuery实现条形统计图，适用于选择题等统计
效果: 思路:前台JS实现动态数据效果,后台可以拼接字符串或者用JSON加载数据 代码: <%@ Page Language="C#" AutoEventWireup=&qu ...
- 点滴积累【JS】---JS小功能（createElement和insertBefore添加div下面的节点）
效果: 代码: <head runat="server"> <title></title> <script type="text ...
- 点滴积累【JS】---JS小功能（onmousedown实现鼠标拖拽div移动）
效果: 思路: 利用onmousedown事件实现拖拽.首先获得鼠标横坐标点和纵坐标点到div的距离,然后当鼠标移动后再用可视区的距离减去横纵坐标与div的距离.然后在判断不让DIV移出可视区,然后再 ...
- 点滴积累【JS】---JS小功能（onmousemove鼠标移动坐标接龙DIV)
效果: 思路: 利用onmousemove事件,然后获取鼠标的坐标,之后把DIV挨个遍历,最后把鼠标的坐标赋给DIV. 代码: <head runat="server"> ...
- 点滴积累【JS】---JS小功能（JS实现模仿微博发布效果)
效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: <hea ...
- 点滴积累【JS】---JS小功能（JS实现多功能缓冲运动框架)
效果: 思路: 首先,多功能框架实现的功能是:css中所有的属性都可以添加进去(也可以把方法作为参数传递过去!),然后进行缓冲运动,比如:物体的高度.长度.颜色.字体大小.透明度等,都可以直接传入参数 ...
- 点滴积累【JS】---JS小功能（JS实现动态添加运动属性)
效果: 思路: 首先遍历div挨个执行onmouseover事件,再设置获取非行间样式.然后编写setInterval计时器框架,框架内容是:将三个参数 div.div属性.div的目标点,分别获得, ...
随机推荐
- openfire在网络不好或掉线时消息丢失的处理方法
在服务端收到消息后增加如下代码 //保存到离线消息表,客户端收到后调用删除离线消息功能,这样可确保即使网络突然掉线或不好的情况下消息丢失的问题 OfflineMessageStore offlineM ...
- Eclipse修改svn地址
版权声明:本文为博主原创文章,未经博主允许不得转载. Eclipse修改svn地址 SVN地址变更后 需要重定向 步骤有3 : 1 ) 打开eclipse中SVN资源库 在Eclipse中选择Wi ...
- 【翻译自mos文章】job 不能自己主动运行的解决方法
job 不能自己主动运行的解决方法 參考原文: Jobs do not execute automatically (Doc ID 309945.1) 适用于: Oracle Server - Ent ...
- Andorid之Annotation框架初使用（三）
线程使用: @Background这个是使用了cached thread pool executor , 阻止开启过多的线程 可以为@Background指定一个id,用于随时终止线程的操作(Back ...
- hdu1269迷宫城堡 (强连通Tarjan+邻接表)
Problem Description 为了训练小希的方向感,Gardon建立了一座大城堡,里面有N个房间(N<=10000)和M条通道(M<=100000),每一个通道都是单向的,就是说 ...
- http://www.cnblogs.com/zhoujinyi/p/3437475.html
http://www.cnblogs.com/zhoujinyi/p/3437475.html
- （转）Akka学习笔记（二）：Actor Systems
Akka学习笔记(二):Actor Systems 图中表示的是一个Actor System,它显示了在这个Actor System中最重要实体之间的关系. 什么是actor,是一个封装了状态和行为的 ...
- 成都PHP开发project师薪资信息
这是成都的PHPproject开发师招聘.如图所见,最低的月薪是4K,最高的是35W,PHP开发工程师正处于炙手可热的发展趋势,还愁拿不到高薪,找不到工作的你,还犹豫什么,机会就在眼前,成都传智播客P ...
- 开源工作流CCBPM中关于解决谷歌等浏览器silverlight的问题
CCBPM的流程设计器和表单设计器.是通过silverlight实现的. 有些用户和学习者在安装完CCFlow,执行流程设计器时,常常会出现提示安装silverlight.明明已经安装了,为什么还会出 ...
- 微信/易信公共平台开发（四）：公众号调试器 (仿真微信平台,提供PHP源码)
开发微信/易信公共平台时,调试往往很麻烦,一般只能在手机上边试边改, 或在服务器写日志.当你的服务器脚本有Bug时,手机上没有显示,追查是不容易的.我在开发过程中,编写了一个调试器, 能仿真微信/易信 ...