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你就知道怎 ...
随机推荐
- 第001弹:Java 中创建对象的4种方式
Java 是面向对象的语言,不可避免的,“对象”这个概念是 Java 语言的核心部分,这里来简单讨论一下在 Java 中创建一般对象的方法. 总结下来有以下4种创建对象的方法: 使用 new 关键字调 ...
- C++调用有道翻译API实现在线翻译之发声篇
大概半月前写了一篇博文:C++中使用Curl和JsonCpp调用有道翻译API实现在线翻译, 得到大家的热情捧场,有人看了文章说要是能发声不是更好,我觉得说的也是哈,能听到专家的标准发音,那该是多美的 ...
- IBM DB2 控制中心等图形工具在 Windows 下的字体设置
原文地址(直接看原文): http://loveseaside.iteye.com/blog/648941 [简介如下] IBM DB2 在版本 8.0 以上就提供了一个跨平台的基于 Java 的一套 ...
- 卡牌游戏(bzoj 3191)
Description N个人坐成一圈玩游戏.一开始我们把所有玩家按顺时针从1到N编号.首先第一回合是玩家1作为庄家.每个回合庄家都会随机(即按相等的概率)从卡牌堆里选择一张卡片,假设卡片上的数字 ...
- hdu 6118 度度熊的交易计划
度度熊的交易计划 Time Limit: 12000/6000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- 【CF1017D】The Wu(状压前缀和)
题意:给定n个a[i],m个长为n的01串,定义串a与b之间的运算为a^b再按位取反,若第i位为1则运算结果加a[i] q组询问(x,y),每次询问m个串中与串x运算后答案小于等于y的串的个数 n&l ...
- 批处理命令之Start的详细用法
Start启动单独的“命令提示符”窗口来运行指定程序或命令.如果在没有参数的情况下使用,start 将打开第二个命令提示符窗口. 语法start ["title"] [/dPath ...
- struts中json机制与普通页面跳转机制混用(全局结果集配置返回json)
package继承json-default与struts-default 返回结果是add的话将addResult属性转换为json返回(addResult属性有getter,setter方法),返回 ...
- 标准C程序设计七---62
Linux应用 编程深入 语言编程 标准C程序设计七---经典C11程序设计 以下内容为阅读: <标准C程序设计>(第7版) 作者 ...
- 05深入理解C指针之---指针声明和解引
该系列文章源于<深入理解C指针>的阅读与理解,由于本人的见识和知识的欠缺可能有误,还望大家批评指教. 一.指针声明: 1.声明普通变量:“数据类型 + 空格 + 变量名 + :”实现普通 ...