JS实现搜索模糊匹配
Js代码
<script type="text/javascript">
var websites = [["1231","账上1","1342333111"],["1232","账上2","452354234234"],["1233","账上3","33333344444"],["1234","账上4","55555555"]
];
$(function() { //使得下拉框的宽度和输入框保持一致
$("#schname").css("width",$("#named").width()); //监听输入框
$("#named").keyup(function (){
var html="";
if($("#named").val().length>0){ var len=websites.length>10?10:websites.length;//最多显示10行
for(var i=0;i< len;i++){
if(websites[i][0].toLowerCase().indexOf($("#named").val().toLowerCase())>=0 && websites[i][1].toLowerCase().indexOf($("#named").val().toLowerCase())>=0 && websites[i][2].toLowerCase().indexOf($("#named").val().toLowerCase())>=0)
{
html+="<tr><td style='color: red;font-weight: bold'>"+websites[i][0]+"</td><td style='color: blue;font-weight: bold'>"+websites[i][1]+"</td><td style='color: pink;font-weight: bold'>"+websites[i][2]+"</td></tr>";
}
else if(websites[i][0].toLowerCase().indexOf($("#named").val().toLowerCase())>=0 && websites[i][1].toLowerCase().indexOf($("#named").val().toLowerCase())>=0 && websites[i][2].toLowerCase().indexOf($("#named").val().toLowerCase())<0)
{
html+="<tr><td style='color: red;font-weight: bold'>"+websites[i][0]+"</td><td style='color: blue;font-weight: bold'>"+websites[i][1]+"</td><td >"+websites[i][2]+"</td></tr>";
}
else if(websites[i][0].toLowerCase().indexOf($("#named").val().toLowerCase())>=0 && websites[i][1].toLowerCase().indexOf($("#named").val().toLowerCase())<0 && websites[i][2].toLowerCase().indexOf($("#named").val().toLowerCase())>=0)
{
html+="<tr><td style='color: red;font-weight: bold'>"+websites[i][0]+"</td><td >"+websites[i][1]+"</td><td style='color: pink;font-weight: bold'>"+websites[i][2]+"</td></tr>";
}
else if(websites[i][0].toLowerCase().indexOf($("#named").val().toLowerCase())<0 && websites[i][1].toLowerCase().indexOf($("#named").val().toLowerCase())>=0 && websites[i][2].toLowerCase().indexOf($("#named").val().toLowerCase())>=0)
{
html+="<tr><td >"+websites[i][0]+"</td><td style='color: blue;font-weight: bold'>"+websites[i][1]+"</td><td style='color: pink;font-weight: bold' >"+websites[i][2]+"</td></tr>";
} else if(websites[i][0].toLowerCase().indexOf($("#named").val().toLowerCase())<0 && websites[i][1].toLowerCase().indexOf($("#named").val().toLowerCase())>=0 && websites[i][2].toLowerCase().indexOf($("#named").val().toLowerCase())<0)
{
html+="<tr><td>"+websites[i][0]+"</td><td style='color: blue';>"+websites[i][1]+"</td><td font-weight: bold'>"+websites[i][2]+"</td></tr>";
}
else if(websites[i][0].toLowerCase().indexOf($("#named").val().toLowerCase())>=0 && websites[i][1].toLowerCase().indexOf($("#named").val().toLowerCase())<0 && websites[i][2].toLowerCase().indexOf($("#named").val().toLowerCase())<0)
{
html+="<tr><td style='color: red;font-weight: bold'>"+websites[i][0]+"</td><td >"+websites[i][1]+"</td><td >"+websites[i][2]+"</td></tr>";
}
else if(websites[i][0].toLowerCase().indexOf($("#named").val().toLowerCase())<0 && websites[i][1].toLowerCase().indexOf($("#named").val().toLowerCase())<0 && websites[i][2].toLowerCase().indexOf($("#named").val().toLowerCase())>=0)
{
html+="<tr><td >"+websites[i][0]+"</td><td >"+websites[i][1]+"</td><td style='color: pink;font-weight: bold'>"+websites[i][2]+"</td></tr>";
} }
if($("#schname").html()==""){
html+="<tr><td >无对应用户</td></tr>";
}
$("#schname").html(html);
$("#schname").css("display","table");
}else{
$("#schname").css("display","none");
} }); // 这里是点击事件处理
$('#schname').on('click', 'tr', function() { if($(this).text()=="无对应用户"){
return;//没有匹配值返回否则做相应处理
}
$("#named").val($(this).text());
$("#schname").css("display","none");
}); });
</script>
当然笔者写的有点繁杂,其实html="<tr></tr>"所有段都可以封装成一个函数,返回一个模板精简化,(这是区分一个程序员代码和思路好坏的重要标准,这是你我的必经之路【大牛除外】)。到时只需要调用该函数即可;
CSS代码:
}
#schname{ background-color:#ffffff;
border: 1px solid #e4e4e4;
/*height: 30px;*/
position: absolute;
/*display: none;*/
z-index: 9999999;
} #schname tr:hover{
background-color: #e4e4e4;
cursor: pointer;
}
#schname tr td{ padding-right: 30px;
}
再来看看HTML
<div >
<div class="seachgroup">
<input type="text" id="named" style="width: 400px">
<table id="schname" > </table>
</div>
</div>
数据格式:
var websites = [["123","1239","1342333111"],["1234","账上","452354234234"],["1235","账上","33333344444"],["1236","账上","55555555"]
];
效果
当然,有个更简单的插件叫做jquery-ui autocomplete 大家可以百度一下使用非常简单。
JS实现搜索模糊匹配的更多相关文章
- Ext.js Combobox 输入模糊匹配
前台页面 aspx: 数据源: <ext:Store ID="storeJF" runat="server" AutoLoad="true&qu ...
- EasyUI combobox下拉列表实现搜索过滤(模糊匹配)
项目中的某个下拉列表长达200多个项,这么巨大的数量一个一个找眼镜都得看花,于是就得整了个搜索功能.看网上别人帖子有只能前缀匹配的方案,但只能前缀匹配的话用起来也不是很方便.于是就记录一下模糊匹配的方 ...
- Android自定义模糊匹配搜索控件(二)
在项目中遇到一个需要通过某个字的值筛选匹配带出其他信息的需求,在这里将实现思路整理出来. 源码地址:https://github.com/whieenz/SearchSelect 先看效果图 上图中的 ...
- 【搜索引擎】 PostgreSQL 10 实时全文检索和分词、相似搜索、模糊匹配实现类似Google搜索自动提示
需求分析 要通过PostgreSQL实现类似Google搜索自动提示的功能,例如要实现一个查询海量数据中的商品名字,每次输入就提示用户各种相关搜索选项,例如淘宝.京东等电商查询 思路 这个功能可以用 ...
- js实现table中前端搜索(模糊查询)
项目中用到js前端搜索功能,根据 姓名或姓名 进行 搜索,实现方法如下,遍历table所有行中的某列,符合条件则置tr为display:'',不满足条件置tr为display:none. 代码如下: ...
- EasyUi模糊匹配搜索框combobox
现在项目当中很多已经应用了Jquery-easyUi这个界面框架了,所以,学习一点easyUI的常用工具就显得很重要了,现在介绍的就是我在项目中用到的easyUi的模糊匹配组合框combobox. c ...
- thinkphp实现模糊匹配(学习贵哥代码)
模板文件: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- 记一个同时支持模糊匹配和静态推导的Atom语法补全插件的开发过程: 序
简介 过去的一周,都睡的很晚,终于做出了Atom上的APICloud语法提示与补全插件:apicloud_autocomplete.个中滋味,感觉还是有必要记录下来的.代码基于 GPL-3.0 开源, ...
- 茗洋Easy UI 1.3.2 部分问题解决系列专题[Combo模糊匹配中文问题 修复]
本次给大家带来的EasyUI的我研究拓展的新特性 我使用的是 EasyUI 1.3.2版本的,项目是ASP.NET MVC3,但是本篇讲解用不上ASP.NET MVC,仅仅修改官方Demo你就知道怎 ...
随机推荐
- Welcome-to-Swift-15反初始化(Deinitialization)
在一个类的实例被释放之前,反初始化函数被立即调用.用关键字deinit来标示反初始化函数,类似于初始化函数用init来标示.反初始化函数只适用于类类型. 反初始化原理 Swift会自动释放不再需要的实 ...
- Qtree
Qtree Ⅰ 题意:https://vjudge.net/problem/SPOJ-QTREE 带修路径查询最大边权 sol :树链剖分,之后每条重链就是一个连续的区间,拿线段树维护即可 简单讲讲 ...
- python解析yaml文件
YAML语法规则: http://www.ibm.com/developerworks/cn/xml/x-cn-yamlintro/ 下载PyYAML: http://www.yaml.org/ 解压 ...
- hdu 4602 递推关系矩阵快速幂模
Partition Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- struts中json机制与普通页面跳转机制混用(全局结果集配置返回json)
package继承json-default与struts-default 返回结果是add的话将addResult属性转换为json返回(addResult属性有getter,setter方法),返回 ...
- 52深入理解C指针之---不透明指针
该系列文章源于<深入理解C指针>的阅读与理解,由于本人的见识和知识的欠缺可能有误,还望大家批评指教.一.size_t:用于安全表示长度,所有平台和系统都会解析成自己对应的长度 1.定义:s ...
- 在4418平台上如何配置GPIO口的状态
硬件 ------------------------------------------------------------------------------------------------- ...
- Yii初学者必看(转载)
Active Record (AR) 是一个流行的 对象-关系映射 (ORM) 技术. 每个 AR 类代表一个数据表(或视图),数据表(或视图)的列在 AR 类中体现为类的属性,一个 AR 实例则表示 ...
- Java实验--关于英文短语词语接龙
在课堂上经过实验之后,重新在宿舍里面从0开始编写大概30分钟左右能够完成这个实验,不是原来的思路. 该实验的表述为:从两个文本input1.txt和input2.txt中读取英文单词,若前面的英文单词 ...
- Jackson对泛型的序列化和反序列化方法汇总
说明:Jackson对于简单泛型是可以正常操作的,但是如果对于太过于复杂的泛型类有时会不成功.目前还在找着更合适的Json库.不过这一点在dotnet原生方案JavaScriptSerializer可 ...