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

输入内容:

上代码:

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. json-server 服务器的接口

    服务器接口的数据在浏览器网络地址中,便可查看: 获取接口的数据需要在网络地址后面,填写接口的名字即可,(对于 json-server来说)

  2. centos下面配置key登录

    centos下需要配置使用key登录,并且要禁止root登录 下面的操作都是用root来设置的 1.添加新用户 例如用户名leisiyuan useradd leisiyuan 2.设置密码 pass ...

  3. 十一、RF操作滚动条

    两种方式: 方式一:window.scrollBy(0, document.body.scrollHeight) 方式二:window.scrollTo(0, document.body.scroll ...

  4. 【1】mongoDB 的安装及启动

    MongoDB是一个面向文档(document-oriented)的数据库,不是关系型数据库.与关系型数据库相比,面向文档的数据库没有"行"的概念,取而代之的是"文档&q ...

  5. 测开之路一百四十八:WTForms表单验证

    使用WTForms表单验证,可以在数据建模时就设置验证信息和错误提示 创建模型时,设置验证内容,如必填.格式.长度 from flask_wtf import Formfrom wtforms imp ...

  6. 测开之路一百四十七:用WTForms实现编辑功能

    接上一篇的内容 把原先的数据库模型全部给默认值,后面form赋值的时候就不用传位置参数了 把视图逻辑修改一下 # 视图层from datetime import datetimefrom flask. ...

  7. 【ABAP系列】SAP S/4 HANA的SMARTFORMS如何切换到非word编辑器

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP S/4 HANA的SMA ...

  8. lsb-realse

    [root@localhost ~]# lsb_release -a -bash: lsb_release: command not found 解决方法:yum install redhat-lsb ...

  9. 2019JAVA第一次編程总结

    2019第二周实验报告 Java实验报告 班级 计算机科学与技术二班 学号 20188442 姓名 吴怡君 完成时间 2019/9/7 评分等级 实验一 Java开发环境与简单Java程序 一. 实验 ...

  10. Maven项目的常用jar包

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...