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 判断指定字符串是否为有效数字
May 11 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
Javascript函数的参数
Jul 16 Javascript
javascript中的previousSibling和nextSibling的正确用法
Sep 16 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
微信小程序 开发工具快捷键整理
Oct 31 Javascript
ReactJS实现表单的单选多选和反选的示例
Oct 13 Javascript
在Vue项目中使用d3.js的实例代码
May 01 Javascript
javascript刷新父页面方法汇总详解
Oct 10 Javascript
layui清除radio的选中状态实例
Nov 14 Javascript
JS实现网页时钟特效
Mar 25 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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
PHP中include()与require()的区别说明
2010/03/10 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
phpstudy的php版本自由修改的方法
2017/10/18 PHP
FLASH 广告之外的链接
2008/12/16 Javascript
jquery之empty()与remove()区别说明
2010/09/10 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
python制作小说爬虫实录
2017/08/14 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
python绘制雷达图实例讲解
2021/01/03 Python
Net-A-Porter美国官网:全球时尚奢侈品名站
2017/02/11 全球购物
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
酒店应聘自荐信
2013/11/09 职场文书
数据员岗位职责
2013/11/19 职场文书
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
北京故宫的导游词
2015/01/31 职场文书
干货:如何写好工作计划!
2019/05/17 职场文书
Golang 切片(Slice)实现增删改查
2022/04/22 Golang