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

输入内容:

上代码:

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. java基础--继承、实现、依赖、关联、聚合、组合的联系与区别

    继承 指的是一个类或者接口继承另一个类或者接口,而且可以增加自己的新功能. 实现 指的是一个class类实现interface接口. 依赖 简单说,就是一个类中的方法用到了另一个类,一般依赖关系在ja ...

  2. vivo 部分链表反转

    方法一:使用栈交换需要反转的数字 #include <iostream> #include <stack> #include "list.h" using ...

  3. Delphi XE2 之 FireMonkey 入门(45Finally) - 结题与问题

    Delphi XE2 之 FireMonkey 入门(45Finally) - 结题与问题 很喜欢 FMX 的一些新控件, 如: TExpander.TArcDial.TComboTrackBar.T ...

  4. Cloudera-JDBC-Driver-for-Apache-Hive

    Cloudera-JDBC-Driver-for-Apache-Hive-Install-Guide.pdf https://github.com/FlowerBirds/flowerbirds.gi ...

  5. 移动端自动化==>什么是Appium

    转自:http://www.imdsx.cn/ 手机App分为两大类,原生App(Native App)和混合APP(Hybrid App) 原生App(Native App) 原生App实际就是我们 ...

  6. C#新特性span 和 Tuple

    span 可用于高性能字符串分割等 https://www.cnblogs.com/lonelyxmas/p/10171869.html https://www.codemag.com/article ...

  7. 关于Goroutine与Channel

    关于Goroutine的原理 原理上的内容比较多,比如goroutine启动的时候要执行哪些相关的操作,一点一点的补充一下. channel的基本原理 channel是go语言中的特殊的机制,既可以同 ...

  8. python+selenium下弹窗alter对象处理01

    alt.accept() :                            等同于单击“确认”或者“OK” alt.dismiss() :                            ...

  9. 洛谷P1347 排序

    这个题看到很多人写Topo排序,其实这道题第一眼看更像是一个差分约束的裸题QWQ... 令dis[x]表示x的相对大小(1是最小,n是最大),显然,对于一个关系A<B,我们有dis[A]< ...

  10. Java基础语法--IDEA快捷键

    Ctrl+Shift + Enter,语句完成“!”,否定完成,输入表达式时按 “!”键Ctrl+E,最近的文件Ctrl+Shift+E,最近更改的文件Shift+Click,可以关闭文件Ctrl+[ ...