点滴积累【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的目标点,分别获得, ...
随机推荐
- bionase
BIONASE BIONASE是一个革命性的新设备,针对过敏性鼻炎(花粉病或枯草热)以及大多其他类型的鼻炎.BIONASE能够缓解以及有效阻止与过敏性鼻炎相关的临床症状,例如:鼻塞,打喷嚏,头疼以及流 ...
- 实验3 OpenGL几何变换
转自:http://www.cnblogs.com/opengl/archive/2012/10/30/2747130.html 1．实验目的: 理解掌握一个OpenGL程序平移.旋转.缩放变换的方法 ...
- booksleeve 使用
By offering pipelined, asynchronous, multiplexed and thread-safe access to redis, BookSleeve enables ...
- Valgrind 内存泄漏工具
Valgrind 是一款 Linux下(支持 x86.x86_64和ppc32)程序的内存调试工具,它可以对编译后的二进制程序进行内存使用监测(C语言中的malloc和free,以及C++中的new和 ...
- UTC 转本地时间
String dateStr = "Wed Dec 10 00:00:00 UTC 0800 2014"; //Wed Dec 10 00:00:00 UTC 0800 2014 ...
- 对开源库使用 AutoCAD 文件格式[转]
https://www.ibm.com/developerworks/cn/opensource/os-autocad/ 对开源库使用 AutoCAD 文件格式 读取 DWG 和 DXF 文件格式 C ...
- Android -- 发送Broadcast、有序无序
普通广播 优缺点:和有序广播的优 ...
- 用一段直径为1的原木制作截面是矩形的横梁，问梁的宽度x和高度y是怎样的比例时，才能使梁的强度最大？
解:根据经验,梁的强度与高度平方成正比,和宽度成反比,可以写成 q=y2x 又有x2+y2=1,得到 q=(1-x2)x=x-x3 而导数q'=1-3x2,当q'=0时,q有极值 q'=0时,x=1/ ...
- android.content.res.Resources$NotFoundException: String resource ID #0x0
仔细检查是不是在settext的时候设置进去的时int属性的值,所以android会认为这是在strings中的值,所以会拿着这个int值当做string的id值去找,结果当然是找不到的.
- .NET破解之繁星代码生成器
本教程只能用于学习研究,不可进行任何商业用途.如有使用,请购买正版,尊重他人劳动成果和知识产权! 对象:繁星代码生成器0.96 环境:Win7 x64 工具:exeinfoPE(查壳).de4dot ...