上来先展示效果:
默认展示效果:

输入内容:

上代码:

css部分:

<style type="text/css">
* {
padding:;
margin:;
}
h2 {
margin-bottom: 20px;
}
#container {
width: 500px;
text-align: center;
margin: 0 auto;
font-family: "微软雅黑";
margin-top: 50px;
}
.selectContainer {
position: relative;
}
.selectInput {
width: 200px;
height: 25px;
border-style: none;
border: 1px solid #999;
border-radius: 3px;
padding: 0 3px;
}
.picture_click {
background: url(img/select-default.png) no-repeat;
opacity:;
width: 15px;
height: 8px;
position: absolute;
top: 10px;
right: 125px;
}
.picture_click:hover {
background-image: url(img/select-hover.png);
}
.selectList {
width: 206px;
height: 212px;
overflow-y: scroll;
text-align: left;
margin: 0 172px;
border: 1px solid #999;
display: none;
position: relative;
}
.selectList div {
cursor: pointer;
}
.nullcon{
display: none;
text-align: center;
padding: 10px;
word-break: break-all;
}
</style>

html部分:

<div id="container">
<h2>模糊搜索</h2>
<div id="cityContainer" class="selectContainer">
<label>公司:</label>
<input type="text" placeholder="请输入公司名称" list="cityList" class="selectInput" name="cityName" id="cityName" value="" onfocus="fuzzySearch.call(this, 'cityList')" />
<div class="picture_click dropDowns" style=""></div>
<div id="cityList" class="selectList"> </div>
</div>
</div>

js部分:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript"> function fuzzySearch(listId) {
var that = this;
//初始化下拉框
initSearchInput(that, listId);
var listArr = [
{'eleId':'01',eleName:'测试公司'},
{'eleId':'02',eleName:'出纳测试公司1'},
{'eleId':'03',eleName:'期间设置公司'},
{'eleId':'04',eleName:'演示公式'},
{'eleId':'05',eleName:'公司11'},
{'eleId':'06',eleName:'HFY测试公司'},
{'eleId':'07',eleName:'测试公司2'},
{'eleId':'08',eleName:'中餐饮有限公司'},
{'eleId':'09',eleName:'烤匠烤鱼餐厅'},
{'eleId':'10',eleName:'呷哺呷哺北京1'},
{'eleId':'11',eleName:'呷哺呷哺北京2店'},
{'eleId':'12',eleName:'呷哺呷哺北京3店'},
{'eleId':'13',eleName:'肯德基'},
{'eleId':'14',eleName:'麦当劳'},
{'eleId':'15',eleName:'必胜客'},
{'eleId':'16',eleName:'麦当劳222'}
] var aa=$('#' + listId); //遍历数组,创建元素默认显示
$('#' + listId).html('');
$.each(listArr, function(index, item){
var divStr = '<div id='+item.eleId+'>'+item.eleName+'</div>';
$('#' + listId).append(divStr);
})
$('#' + listId).append('<div id="nullcon" class="nullcon">没有找到内容</div>'); //current用来记录当前元素的索引值
var current = 0;
//匹配文本框中输入的字符串
var showList = searchText(that, listArr, listId); bindFun(); //为文本框绑定键盘引起事件
$(this).keyup(function(e){
//如果输入空格自动删除
this.value=this.value.replace(' ','');
//列表框显示
$('#' + listId).show();
if(e.keyCode == 38) {
//up
console.log('up');
current --;
if(current <= 0) {
current = 0;
}
console.log(current);
}else if(e.keyCode == 40) {
//down
console.log('down');
current ++;
if(current >= showList.length) {
current = showList.length -1;
}
console.log(current); }else if(e.keyCode == 13) {
//enter
console.log('enter');
//如果按下回车,将此列表项的内容填充到文本框中
$(that).val(showList[current].eleName);
//下拉框隐藏
$('#' + listId).hide();
}else {
//other
console.log('other');
showList = searchText(that, listArr, listId);
current = 0;
} //设置当前项的背景色及位置
if(showList && showList.length!=0){
$.each(showList, function(index, item){
if(index == current) {
$('#' + item.eleId).css('background', '#eee');
$('#' + listId).scrollTop($('#' + item.eleId).get(0).offsetTop);
}else {
$('#' + item.eleId).css('background', '');
}
})
}
//设置下拉框的高度
//212为列表框的最大高度
if(showList && showList.length!=0){
if(212 > $('#' + listId).find('div').eq(0).height() * showList.length) {
$('#' + listId).height($('#' + listId).find('div').eq(0).height() * showList.length);
}else {
$('#' + listId).height(212);
}
}
})
} //绑定事件
function bindFun(){
//给下拉箭头绑定点击事件 点击下拉箭头显示/隐藏对应的列表
//输入框的类名为selectInput
//下拉箭头的类名为picture_click、dropDowns
//下拉列表的类名为selectList
for(var i = 0; i < $('.picture_click').length; i++) {
$('.picture_click').eq(i).click(function(){
$(this).parent().find('.selectList').toggle();
})
} //为列表中的每一项绑定鼠标经过事件
$('.selectList div').mouseenter(function(){
$(this).css("background", "#eee").siblings().css("background", "");
});
//为列表中的每一项绑定单击事件
$('.selectList div').bind('click', function(){
//文本框为选中项的值
$(this).parent().parent().find('.selectInput').val($(this).html());
//下拉框隐藏
$(this).parent().hide();
});
} function initSearchInput(that, listId) { //点击下拉框外部的时候使下拉框隐藏
var dropDowns = document.getElementsByClassName('dropDowns');
var selectList = document.getElementsByClassName('selectList'); document.body.onclick = function(e){
e = e || window.event;
var target = e.target || e.srcElement;
console.info('target', target);
console.info('that', that);
console.info('===', target == that)
if(target == that){
$('#' + listId).show();
}else{
for(var i = 0; i < dropDowns.length; i++) {
if(target != dropDowns[i] && target != selectList[i]){
selectList[i].style.display = 'none';
}
}
} }
} function searchText(that, listArr, listId){
//文本框中输入的字符串
var searchVal = $(that).val();
var showList = [];
if(showList.length== 0 && !$(that).val()){
//showList为列表中和所输入的字符串匹配的项
showList = listArr;
} if(searchVal){
//将和所输入的字符串匹配的项存入showList
//将匹配项显示,不匹配项隐藏
$.each(listArr, function(index, item){
if(item.eleName.indexOf(searchVal) != -1) {
$('#' + item.eleId).css('display', 'block');
showList.push(item);
}else {
$('#' + item.eleId).css('display', 'none');
}
})
}else{
showList = listArr;
$.each(listArr, function(index, item){
$('#' + item.eleId).css('display', 'block');
})
$(that).siblings('.selectList').find('#nullcon').hide();
} if(showList.length== 0 && $(that).val()){
$('#' + listId).height(50);
$(that).siblings('.selectList').find('#nullcon').html('没有找到"'+$(that).val()+'"的内容').show();
} console.log('showList', showList); return showList;
}
</script>

超好用的input模糊搜索 jq模糊搜索,的更多相关文章

  1. layui select配合input实现动态模糊搜索

    功能需求:select框可以自己输入,就是在下拉列表里找不到自己想要的选项就可以自己输入,同时还要支持模糊匹配功能 html代码: 样式: <style> .select-search-i ...

  2. 整理版jq 复习贴子

    1绝对定位(abs)与相对定位(relative) 区别是相对定位参照自己的位置进行移动(当然需要设置top left这些生效)并且原来的位置保留着 偏移后会把 其它的层遮罩住 绝对定位就是的参照位置 ...

  3. jq处理JSON数据, jq Manual (development version)

    jq 允许你直接在命令行下对 JSON 进行操作,包括分片.过滤.转换等等.让我们通过几个例子来说明 jq 的功能:一.输出格式化,漂亮的打印效果如果我们用文本编辑器打开 JSON,有时候可能看起来会 ...

  4. 49.CSS--- 特殊css3效果展示

    1.设置多行文本超出显示省略号<div class="caption"> <p>显示超过两行就显示省略号,其余隐藏,隐藏不了的情况下给这个模块添加一个高度和 ...

  5. (转)倾力总结40条常见的移动端Web页面问题解决方案

    原文链接:戳这里 1.安卓浏览器看背景图片,有些设备会模糊.   用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太 ...

  6. 【转】40条常见的移动端Web页面问题解决方案

    1.安卓浏览器看背景图片,有些设备会模糊                  2.图片加载                            3.假如手机网站不用兼容IE浏览器,一般我们会使用zep ...

  7. 移动端Web页面问题(转载)

    1.安卓浏览器看背景图片,有些设备会模糊.   用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率 ...

  8. 倾力总结40条常见的移动端Web页面问题解决方案

    1.安卓浏览器看背景图片,有些设备会模糊.   用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率 ...

  9. 1.7.4 Query Syntax and Parsing

    1. 查询语法和解析 这部分主要说明了如何指定被使用的查询解析器.同样描述了主查询解析器的支持的语法和功能.同时还描述了在特定环境下使用的其他查询解析器.这里有一些普通查询解析器都能使用的参数,将会在 ...

随机推荐

  1. java7和java8新特性

    以下来至网址: http://blog.csdn.net/samjustin1/article/details/52268004 Java7 新特性 1.switch中可以使用字符串了 String ...

  2. ros 下常用的依赖库

    <buildtool_depend>catkin</buildtool_depend> <build_depend>nav_msgs</build_depen ...

  3. 开发-日常工具:TFS(Team Foundation Server)

    ylbtech-开发-日常工具:TFS(Team Foundation Server) TFS(Team Foundation Server)是一个高可扩展.高可用.高性能.面向互联网服务的分布式文件 ...

  4. 【漏洞学习】slowHTTPtest 慢速 DOS 攻击方法 修复方案

    日期:2018-05-28 21:41:59 更新:2019-07-05 23:15:21 作者:Bay0net 介绍:学习一下 slowHTTPtest 的攻击及防御. 0x01. 安装 下载链接 ...

  5. AndroChef Java Decompile

    With AndroChef Java Decompiler you can decompile apk., dex, jar and java class-files. It's simple an ...

  6. 操作Json对象的C#方法

    json对象长这样 { "UniqueName": { "Required": "true", , , "Regex": ...

  7. itchat监听微信撤回消息

    import itchat from itchat.content import * import re msg_infomation = {} # 监听发送消息 @itchat.msg_regist ...

  8. 四、Zabbix-zabbix agent部署

    1.添加zabbix安装源 rpm -i http://repo.zabbix.com/zabbix/3.4/rhel/7/x86_64/zabbix-release-3.4-2.el7.noarch ...

  9. QML - 实现Gstreamer投屏 投屏画面遮挡

    1.     背景介绍 中控端运行的操作系统是Android,中控软件主要功能有导航.收音机.媒体(音乐).蓝牙(连接).手机互联.行车辅助和系统设置等. 仪表端运行的操作系统是Linux,仪表软件主 ...

  10. 跟风Manacher算法整理

    这是上上周天机房一位神仙讲的,\(gu\)了这么久才来整理\(w\),神仙讲的基本思路已经全都忘记了,幸好的是神仙写了\(blog\),吹爆原博浅谈\(Manacher\)算法,以及原博神仙\(ych ...