HTML5 JQuery 实现搜索匹配功能

效果动态图：

源代码：

all.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 JS实现搜索匹配功能-jq22.com</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
div,li,ul {margin:0;padding:0;
}
ul li {list-style:none;
}
.basic-grey {width:600px;margin:5% 10%;
}
.basic-grey .Companies {position:relative;
}
.basic-grey .Companies ul {position:relative;height:210px;width:100%;overflow-y:auto;border:1px solid #DDD;display:none;
}
.basic-grey .Companies ul li {padding:3px 12px;
}
.basic-grey .Companies ul li:hover {background-color:#bebebe;cursor:pointer;
}
.basic-grey .Companies ul li.top {position:absolute;top:0;
}
</style>
</head>
<body>
<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
<div class="g-container"> <form action="" class="basic-grey"><div class="form-group"><label for="lastname" class="control-label">公司选择:</label><div class="Companies"><input class="form-control" type="text" placeholder="请选择" id="js-groupId"><input type="hidden" id="groupId"><ul id="groupid"><li data-id="827"><a href="javascript:void(0)">厦门集众筹智科技有限公司</a></li><li data-id="826"><a href="javascript:void(0)">苏州高新区文体发展有限公司</a></li><li data-id="825"><a href="javascript:void(0)">美罗城test</a></li><li data-id="824"><a href="javascript:void(0)">深圳市高收益科技开发有限公司</a></li><li data-id="823"><a href="javascript:void(0)">深圳市蜗爱生活科技开发有限公司</a></li><li data-id="815"><a href="javascript:void(0)">深圳市宇恒乐便利店管理有限公司</a></li><li data-id="814"><a href="javascript:void(0)">广东胜佳超市有限公司</a></li><li data-id="813"><a href="javascript:void(0)">顺义李先生说</a></li><li data-id="812"><a href="javascript:void(0)">十足集团股份有限公司</a></li><li data-id="811"><a href="javascript:void(0)">宏图三胞高科技术有限公司</a></li><li data-id="810"><a href="javascript:void(0)">九州连锁超市公司</a></li><li data-id="809"><a href="javascript:void(0)">李先生</a></li><li data-id="808"><a href="javascript:void(0)">李先生牛肉面快餐厅</a></li><li data-id="807"><a href="javascript:void(0)">李先生牛肉面快餐厅</a></li><li data-id="806"><a href="javascript:void(0)">美宜佳便利店有限公司</a></li><li data-id="805"><a href="javascript:void(0)">上海一嗨汽车租赁有限公司</a></li><li data-id="804"><a href="javascript:void(0)">龙湖商业地产（重庆区）</a></li><li data-id="803"><a href="javascript:void(0)">阜阳华联集团股份有限公司</a></li><li data-id="802"><a href="javascript:void(0)">百万庄园</a></li><li data-id="801"><a href="javascript:void(0)">百万庄园</a></li><li data-id="800"><a href="javascript:void(0)">上海恭胜酒店管理有限公司</a></li><li data-id="799"><a href="javascript:void(0)">北京好伦哥餐饮有限公司</a></li><li data-id="798"><a href="javascript:void(0)">富驿酒店集团有限公司</a></li></ul></div></div></form></div><script>
jQuery.expr[':'].Contains = function(a, i, m) {return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};function filterList(list) {$('#js-groupId').bind('input propertychange', function() {var filter = $(this).val();if (filter) {$matches = $(list).find('a:Contains(' + filter + ')').parent();$('li', list).not($matches).slideUp();$matches.slideDown();} else {$(list).find("li").slideDown();}});
}
$(function() {filterList($("#groupid"));$('#js-groupId').bind('focus', function() {$('#groupid').slideDown();}).bind('blur', function() {$('#groupid').slideUp();})$('#groupid').on('click', 'li', function() {$('#js-groupId').val($(this).text())$('#groupId').val($(this).data('id'))$('#groupid').slideUp()});
})
</script></body>
</html>

HTML5 JQuery 实现搜索匹配功能相关推荐

JS实现搜索匹配功能
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
Elasticsearch搜索匹配功能解析(十一)
针对不同的数据类型,ES提供了很多搜索匹配功能: 完全匹配的term搜索按照范围匹配的range搜索分词匹配的match搜索前缀匹配的suggest搜索查询所有文档在关系型数据库中,当需要查 ...
javascript搜索框联想搜索_JavaScript实现搜索联想功能
-.虽然Jquery已经有了一个完整的包实现前端搜索联想功能,但是出于学习还是想了解一下实现此功能的原理性回想起来实现此功能很简单,1.前端输入字符串文本改变异步请求服务器将返回的资料显示 ...
input 模糊匹配功能文本框模糊匹配(纯html+jquery简单实现) demo
input 模糊匹配功能文本框模糊匹配(纯html+jquery简单实现) demo <!DOCTYPE HTML> <html lang="en"> & ...
迷你播放器--第一阶段（6）--添加搜索定位功能（进阶）-使用filter过滤以及对汉语拼音的排序匹配
迷你播放器--第一阶段(6) 添加搜索定位功能(进阶)-使用filter过滤以及对汉语拼音的排序匹配; 本文章为CSDN作者原创,转载请保留出处:http://blog.csdn.net/lrs030 ...
通过jQuery实现淘宝搜索提示功能
一.先来展示下功能: 淘宝搜索提示功能二.实现: 1.大体实现思路: 先从input框里获得输入的内容,再把得到的内容通过jQuery封装的ajax以jsonp的形式发送出去.接着把响应回来的数据渲 ...
Dynatable – 基于 HTML5 jQuery 的交互表格插件
Dynatable 一款有趣的,语义化,交互式的表格插件,使用 jQuery,HTML5 和 JSON 实现.Dynatable 的目的是提供一种简单的.可扩展的 API,能够轻松的浏览和操作大规模的 ...
网站开发中很实用的 HTML5 jQuery 插件
这篇文章挑选了15款在网站开发中很实用的 HTML5 & jQuery 插件,如果你正在寻找能优化网站,使其更具创造力和视觉冲击,那么本文正是你需要的.这些优秀的 jQuery 插件能为你的网 ...
html实现照片添加功能,HTML5 Canvas调用手机拍照功能实现图片上传功能（图文详解上篇）...
这篇文章主要为大家详细介绍了HTML5 Canvas,和jquery技术,调用手机拍照功能实现图片上传,具有一定的参考价值,感兴趣的小伙伴们可以参考一下因为最近一段时间,一直在弄微信项目,其中涉及到 ...

HTML5 JQuery 实现搜索匹配功能

HTML5 JQuery 实现搜索匹配功能

HTML5 JQuery 实现搜索匹配功能相关推荐

最新文章

热门文章