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 相关文章推荐
javascript 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
ActiveX控件与Javascript之间的交互示例
Jun 04 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
JQuery实现网页右侧随动广告特效
Jan 17 Javascript
jQuery视差滚动效果网页实现方法经验总结
Sep 29 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
利用Node.js对文件进行重命名
Mar 12 Javascript
node通过express搭建自己的服务器
Sep 30 Javascript
详解vue axios二次封装
Jul 22 Javascript
使用webpack打包后的vue项目如何正确运行(express)
Oct 26 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 Javascript
JavaScript实现栈结构Stack过程详解
Mar 07 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+mysql扎实个人基本功
2008/03/27 PHP
简单的方法让你的后台登录更加安全(php中加session验证)
2012/08/22 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
2014/02/23 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
vue-cli之router基本使用方法详解
2017/10/17 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
微信小程序中的列表切换功能实例代码详解
2020/06/09 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
护理学毕业生自荐信
2013/10/02 职场文书
预备党员思想汇报范文
2014/01/11 职场文书
销售口号大全
2014/06/11 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
运动会广播稿200米(5篇)
2014/10/15 职场文书
先进典型发言材料
2014/12/30 职场文书
Win11局域网共享权限在哪里设置? Win11高级共享的设置技巧
2022/04/05 数码科技
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android