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 学习笔记(十三)Dom创建表格
Jan 21 Javascript
jquery 插件开发备注
Aug 27 Javascript
JS命名空间的另一种实现
Aug 09 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
10种JavaScript最常见的错误(小结)
Jun 21 Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
js删除对象中的某一个字段的方法实现
Jan 11 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 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 XML操作类DOMDocument
2009/12/16 PHP
初识laravel5
2015/03/02 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
js css后面所带参数含义介绍
2013/08/18 Javascript
Google官方支持的NodeJS访问API,提供后台登录授权
2014/07/29 NodeJs
JavaScript设计模式之外观模式实例
2014/10/10 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
jquery validate demo 基础
2015/10/29 Javascript
ES6中的数组扩展方法
2016/08/26 Javascript
jquery基本选择器匹配多个元素的实现方法
2016/09/05 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
详解element-ui中form验证杂记
2019/03/04 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
Python描述器descriptor详解
2015/02/03 Python
基于Python开发chrome插件的方法分析
2018/07/07 Python
python 为什么说eval要慎用
2019/03/26 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
python使用rsa非对称加密过程解析
2019/12/28 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
Django返回HTML文件的实现方法
2020/09/17 Python
罗马尼亚购物网站:Vivantis.ro
2019/07/20 全球购物
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
法警的竞聘演讲稿
2014/01/02 职场文书
公证委托书格式
2014/09/13 职场文书
违纪学生保证书
2015/02/27 职场文书
放牛班的春天观后感
2015/06/01 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android