JS仿百度自动下拉框模糊匹配提示


Posted in Javascript onJuly 25, 2016

JS仿百度自动下拉框模糊匹配提示

实际项目中,我们可以把数据获取改成ajax动态获取,在 getContent()中

<!DOCTYPE>
<html>
<head>
<title>js/jQuery实现类似百度搜索功能</title>
<meta name="Author" content="Michael">
<meta name="Keywords" content="js/jQuery实现类似百度搜索功能">
<meta name="Description" content="js/jQuery实现类似百度搜索功能,可用键盘控制">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
#container {
position: absolute;
left: 50%;
top: 40%;
}
#content {
float: left;
position: relative;
right: 50%;
}
input {
border: 0;
width: 288px;
height: 30px;
font-size: 16px;
padding: 0 5px;
line-height: 30px;
}
.item {
padding: 3px 5px;
cursor: pointer;
}
.addbg {
background: #87A900;
}
.first {
border: solid #87A900 2px;
width: 300px;
}
#append {
border: solid #87A900 2px;
border-top: 0;
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div class="first">
<input id="kw" onKeyup="getContent(this);" />
</div>
<div id="append"></div>
</div>
</div>
<script type="text/javascript">
var data = [
"你好,我是Michael",
"你是谁",
"你最好啦",
"你最珍贵",
"你是我最好的朋友",
"你画我猜",
"你是笨蛋",
"你懂得",
"你为我着迷",
"你是我的眼"
];
$(document).ready(function() {
$(document).keydown(function(e) {
e = e || window.event;
var keycode = e.which ? e.which : e.keyCode;
if (keycode == 38) {
if (jQuery.trim($("#append").html()) == "") {
return;
}
movePrev();
} else if (keycode == 40) {
if (jQuery.trim($("#append").html()) == "") {
return;
}
$("#kw").blur();
if ($(".item").hasClass("addbg")) {
moveNext();
} else {
$(".item").removeClass('addbg').eq(0).addClass('addbg');
}
} else if (keycode == 13) {
dojob();
}
});
var movePrev = function() {
$("#kw").blur();
var index = $(".addbg").prevAll().length;
if (index == 0) {
$(".item").removeClass('addbg').eq($(".item").length - 1).addClass('addbg');
} else {
$(".item").removeClass('addbg').eq(index - 1).addClass('addbg');
}
}
var moveNext = function() {
var index = $(".addbg").prevAll().length;
if (index == $(".item").length - 1) {
$(".item").removeClass('addbg').eq(0).addClass('addbg');
} else {
$(".item").removeClass('addbg').eq(index + 1).addClass('addbg');
}
}
var dojob = function() {
$("#kw").blur();
var value = $(".addbg").text();
$("#kw").val(value);
$("#append").hide().html("");
}
});
function getContent(obj) {
var kw = jQuery.trim($(obj).val());
if (kw == "") {
$("#append").hide().html("");
return false;
}
var html = "";
for (var i = 0; i < data.length; i++) {
if (data[i].indexOf(kw) >= 0) {
html = html + "<div class='item' onmouseenter='getFocus(this)' onClick='getCon(this);'>" + data[i] + "</div>"
}
}
if (html != "") {
$("#append").show().html(html);
} else {
$("#append").hide().html("");
}
}
function getFocus(obj) {
$(".item").removeClass("addbg");
$(obj).addClass("addbg");
}
function getCon(obj) {
var value = $(obj).text();
$("#kw").val(value);
$("#append").hide().html("");
}
</script>
</body>
</html>

以上所述是小编给大家介绍的JS仿百度自动下拉框模糊匹配提示,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jquery.AutoComplete.js中文修正版(支持firefox)
Apr 09 Javascript
不同浏览器的怪癖小结
Jul 11 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
常见表单重复提交问题整理及解决方法
Nov 13 Javascript
JS往数组中添加项性能分析
Feb 25 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
微信小程序实现同时上传多张图片
Feb 03 Javascript
JavaScript前端实现压缩图片功能
Mar 06 Javascript
JS本地刷新返回上一页代码
Jul 25 #Javascript
jQuery layui常用方法介绍
Jul 25 #Javascript
Bootstrap Validator 表单验证
Jul 25 #Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 #Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
Jul 25 #Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
Jul 25 #Javascript
javascript insertAfter()定义与用法示例
Jul 25 #Javascript
You might like
PHP编写RESTful接口
2016/02/23 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
javascript中的float运算精度实例分析
2010/08/21 Javascript
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
JS实现密码框效果
2020/09/10 Javascript
Python实现测试磁盘性能的方法
2015/03/12 Python
详解Python中expandtabs()方法的使用
2015/05/18 Python
Python对象转JSON字符串的方法
2016/04/27 Python
python scipy求解非线性方程的方法(fsolve/root)
2018/11/12 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
一些Solaris面试题
2013/03/22 面试题
应届生船舶驾驶求职信
2013/10/19 职场文书
个人自我鉴定写法
2013/11/30 职场文书
2014年德育工作总结
2014/11/20 职场文书
金秋助学感谢信
2015/01/21 职场文书
刮痧观后感
2015/06/05 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
2016天猫双十一广告语
2016/01/28 职场文书
MySQL系列之三 基础篇
2021/07/02 MySQL
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android