jQuery 实现input搜索框自动匹配------Sestid

效果动态图：

源代码：

<!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>

jQuery 实现input搜索框自动匹配------Sestid相关推荐

搜索框自动补全(模糊匹配)功能实现
本地实现了一个搜索框自动补全的小功能,在JQuery UI的autocomplete插件的基础上,加入了自己的业务代码,贴出来回顾一下,同时可以给大家一个参考首先贴出的是JQuery Ui 的自动补 ...
Ajax实现百度搜索框自动提示功能
Ajax实现百度搜索框自动提示功能当你在搜索框内写入关键字时下拉框会匹配和你输入的关键字相匹配的信息文章目录 Ajax实现百度搜索框自动提示功能一.实现效果二.代码实现 1.前端页面 2.后端 ...
Elasticsearch 分布式搜索引擎 -- 自动补全（拼音分词器、自定义分词器、自动补全查询、实现搜索框自动补全）
文章目录 1. 自动补全 1.1 拼音分词器 1.2.1 自定义分词器 1.2.2 小结 1.2 自动补全 1.3 实现酒店搜索框自动补全 1.3.1 修改酒店映射结构 1.3.2 修改HotelDo ...
纯js实现搜索框自动补全
纯js实现搜索框自动补全开发语言:HTML+CSS+JS 编辑器:VSCode 构建思路:建立两个div,一个用于输入和搜索,一个用于展示,用于展示的初始状态为隐藏的.后面当有键盘输入事件时就显示, ...
input文本框自动填充背景色黄色解决办法
文章目录 input文本框自动填充背景色黄色解决方式解决前后,截图对比: 解决方式兼容性说明 input文本框自动填充背景色黄色解决方式如何取消黄背景色?浏览器兼容处理? 解决前后,截图对比: ...
html5 input搜索框样式修改,修改input搜索框默认叉号的样式为自定义图片
兼容IE的自定义input搜索框叉号样式(使用图片替换input原生叉号) 代码 input::-webkit-search-cancel-button { -webkit-appearance: n ...
解决 input密码框自动填充
火狐上input密码框自动填充值的有关问题 By wangzhehui at 2014-06-07 117 阅读 0 回复 0.0 希赛币请点击下面回答中的"采纳为答案&q ...
html里怎么把搜索框点击时变色,input搜索框鼠标放上或划过表单边框变色
input搜索框鼠标放上或划过表单边框变色代码: /p> Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 ...
html 搜索框自动补全,自动完成的搜索框javascript实现
自动完成的搜索框javascript实现 2019-01-04 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了自动完成的搜索框javascript实现,编程之家 ...

jQuery 实现input搜索框自动匹配------Sestid

jQuery 实现input搜索框自动匹配------Sestid相关推荐

最新文章

热门文章