点滴积累【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的目标点,分别获得, ...
随机推荐
- mongodb，redis，memcached，mysql对比
1.性能都比较高,性能对我们来说应该都不是瓶颈总体来讲,TPS方面redis和memcache差不多,要大于mongodb 2.操作的便利性memcache数据结构单一redis丰富一些,数据操作方面 ...
- 在Spark程序中使用压缩
当大片连续区域进行数据存储并且存储区域中数据重复性高的状况下,数据适合进行压缩.数组或者对象序列化后的数据块可以考虑压缩.所以序列化后的数据可以压缩,使数据紧缩,减少空间开销. 1. Spark对压缩 ...
- JVM内存参数详解以及配置调优
基本概念:PermGen space:全称是Permanent Generation space.就是说是永久保存的区域,用于存放Class和Meta信息,Class在被Load的时候被放入该区域He ...
- @Redis Desktop Manager无法连接虚拟机中启动的redis服务问题解决
Redis Desktop Manager下载地址 https://redisdesktop.com/download 安装好以后连接linux服务器上的Redis服务器错误: 问题排查: 1.检查R ...
- [Todo] solr, lucence等学习
先参考这个吧 http://www.shareditor.com/blogshow/6
- 通过完整示例来理解如何使用 epoll
网络服务器通常使用一个独立的进程或线程来实现每个连接.由于高性能应用程序需要同时处理大量的客户端,这种方法就不太好用了,因为资源占用和上下文切换时间等因素影响了同时处理大量客户端的能力.另一种方法是在 ...
- Node.js：Stream(流)
Stream 是一个抽象接口,Node 中有很多对象实现了这个接口.例如,对http 服务器发起请求的request 对象就是一个 Stream,还有stdout(标准输出). Node.js,Str ...
- EasyUI-window包含一个iframe，在iframe中如何关闭window
我试过类似$('#win').window('close');报$.data...options无效的错误,我已经引入了js文件,路径没问题,而且在同一个页面,不用iframe是可以关闭的 在ifra ...
- MatLab2012b/MatLab2013b 分类器大全(svm,knn,随机森林等)
train_data是训练特征数据, train_label是分类标签.Predict_label是预测的标签.MatLab训练数据, 得到语义标签向量 Scores(概率输出). 1.逻辑回归(多项 ...
- Opencv 完美配置攻略 2014 (Win8.1 + Opencv 2.4.8 + VS 2013)
http://my.phirobot.com/blog/2014-02-opencv_configuration_in_vs.html 2012年4月给同学写了篇傻瓜式的 VS2010+Opencv- ...