点滴积累【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的目标点,分别获得, ...
随机推荐
- spring-cloud服务器雪崩效应
在微服务架构中,根据业务来拆分成一个个的服务,服务与服务之间可以相互调用(RPC),在Spring Cloud可以用RestTemplate+Ribbon和Feign来调用.为了保证其高可用,单个服务 ...
- [翻译] UIView-draggable 可拖拽的UIView
UIView-draggable 可拖拽的UIView https://github.com/andreamazz/UIView-draggable UIView category that adds ...
- 第十章 OPENWRT安装nohup，因为不明原因nohup没有安装
Available pacaagess里找了coreutils-nohup包,安装好就行了 运行nohup自己的程序的时候可能会出现一下: root@OpenWrt:~# nohup: ignorin ...
- easyui radio 取值和赋值
1.html文件 <td><input id="client" type="text" name="client" sty ...
- iOS: 字体样式
获取iOS内置所有的字体如下: NSArray *familyNames = [UIFont familyNames]; for( NSString *familyName in familyName ...
- 自建一个Java Spring MVC项目
用IDEA Intellij,本来创建的是SpringMVC项目,但是下载的时候,太慢了.所以还是用的Maven项目. 选择Maven 项目->Archetype->Web applica ...
- JSP学习笔记（四）：文件上传
JSP 可以与 HTML form 标签一起使用,来允许用户上传文件到服务器.上传的文件可以是文本文件或图像文件或任何文档.我们使用 Servlet 来处理文件上传,使用到的文件有: upload.j ...
- 在 WF 4 中编写自定义控制流活动
在 WF 4 中编写自定义控制流活动 Leon Welicki 控制流是指组织和执行程序中各个指令的方法. 在 Windows Workflow Foundation 4 (WF 4) 中,控制流活动 ...
- 【python】如何安装BeautifulSoup4
在cmd窗口输入 pip install beautifulsoup4,如下: C:\Users\horn1\Desktop\python\3>pip install beautifulsoup ...
- grid control 11.1.0.1 安装指南
grid control 11.1.0.1 安装指南 废话少说,进入正题 系统版本号 [root@gridcontrol ~]# lsb_release -a LSB Version: :bas ...