1、简述

实现模糊查询方法有很多种,后端可以实现,前端使用js也可以实现。

后端实现起来需要根据输入框中搜索的关键字,去后台拼接SQL语句查询。

前端直接使用字符串的indexOf()方法或者正则表达式匹配实现,相比后端实现这种方法的用户体验更友好。

2、demo

当输入框中输入内容或者点击查询按钮时,

根据输入框中的关键字,模糊查询下面表格的内容,并重新渲染表格。

代码如下。

(1)javascript代码:

let listData = ["上海市","黄浦区","卢湾区","徐汇区","长宁区","静安区","普陀区",
"闸北区","杨浦区","虹口区","闵行区","宝山区","嘉定区","浦东新区",
"金山区","松江区","青浦区","南汇区","奉贤区","崇明县" ]; function Fuzzysearch(listData){ this.listData = listData,//请求得到的数据
this.searchKey = document.getElementById('searchKey'),//查询关键字
this.searchBtn = document.getElementById('searchBtn'),//查询按钮
this.searchShow = document.getElementById('searchShow')//显示查询结果的表格 this.renderTab(this.listData);
this.init();
} Fuzzysearch.prototype={
init :function(){
let _this = this;
//键入触发事件
_this.searchKey.onkeyup=function(){
let searchResult = _this.searchFn();
_this.renderTab(searchResult);
}; //点击查询按钮触发事件
_this.searchBtn.onclick=function(){
let searchResult = _this.searchFn();
_this.renderTab(searchResult);
}; },
searchFn:function(){
var keyWord = this.searchKey.value;
var len = this.listData.length;
var arr = [];
var reg = new RegExp(keyWord);
for(var i=0;i<len;i++){
//如果字符串中不包含目标字符会返回-1
if(this.listData[i].match(reg)){
arr.push(listData[i]);
}
}
return arr;
}
,renderTab:function(list){
let colStr = ''; if(list.length==0){
this.searchShow.innerHTML='未查询到关键字相关结果';
return;
} for(var i=0,len=list.length;i<len;i++){
colStr+="<tr><td>"+list[i]+"</td></tr>";
}
this.searchShow.innerHTML = colStr;
} } new Fuzzysearch(listData);

(2)html代码:

<div class="wrap">
<input type='text' value="" id='searchKey'/>
<input type='button' value="查询" id='searchBtn'/>
<table id='searchShow'></table>
</div>

(3)css代码:

 .wrap{width:50%;margin:0 auto;}
#searchShow{font-size:12px;border:1px solid #ccc; border-collapse: collapse;margin-top:20px;}
#searchShow td{border:1px solid #ccc;padding:4px 5px;}
#searchShow tr:nth-child(even) {
background: hsl(180, 35%, 58%);
color: #fff;
}
#searchShow tr:nth-child(odd) {
background: White;
}

3、运行效果

4、源码下载

https://github.com/lemonYU/fuzzySearch#fuzzysearch

如果对您有帮助的话,记得帮我star哦(笔芯ღ( ´・ᴗ・` ))

js实现模糊查询的更多相关文章

  1. 编写简易的JS输入框模糊查询匹配(附有源码和demo)

    前言:JS输入框模糊匹配插件以前在工作写过一个类似的 所以这次写轻松很多,这次写优化了几个方面: 1. 添加动态加载css文件 不需要引入css css全部在JS动态生成. 2. 不需要额外的标签 只 ...

  2. js的模糊查询

    在项目中会用到模糊查询,之前在首页是用的element的tree显示的目录,会有用到搜索,但tree里边会有自带的模糊查询,用filter-node-method方法使用 但上次的项目中 又涉及到不试 ...

  3. 模糊查询基于select遍历json文件自动填充的实现

    HTML页面 <tr> <td align="left"><span>案由</span> <input type=" ...

  4. js—模糊查询

    首先要明白什么是模糊查询(废话又来了),就是根据关键字把列表中符合关键字的一项或某项罗列出来,也就是要检查列表的每一项中是否含有关键字,因此抽象一下就是一个字符串中是否含有某个字符或者字符串. 以下例 ...

  5. js前端实现模糊查询

    对于模糊查询,一般都是传关键字给后端,由后端来做.但是有时候一些轻量级的列表前端来做可以减少ajax请求,在一定程度上提高用户体验.废话不多说,直接上代码. //字符串方法indexOfvar len ...

  6. 前端js模糊搜索(模糊查询)

    1.html结构: <label for="searchShop" class="clear pos-a" style="top:17px;&q ...

  7. js模糊查询案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. js实现下拉框模糊查询

    keyup方法触发模糊查询 list : Array<any> //下拉列表所有内容 filtList:Array<any> //过滤后的内容 inputContent : s ...

  9. 通过模拟数据,使用js在前端实现模糊查询下拉框功能实例教程

    所谓模糊查询就是通过关键字在数据中匹配到包含关键字的数据,而得出的查询结果.本实例教程讲解在前端文本框输入关键字,显示匹配的数据列表功能. 首先得准备一个文本框和显示数据列表的div元素,html代码 ...

随机推荐

  1. [svc][jk][mem]linux 内存清理/释放命令

    1.清理前内存使用情况 free -m 2.开始清理  echo 1 > /proc/sys/vm/drop_caches 3.清理后内存使用情况 free -m 4.完成! 查看内存条数命令: ...

  2. 红茶一杯话Binder (ServiceManager篇)

    1.先说一个大概 Android平台的一个基本设计理念是构造一个相对平坦的功能集合,这些功能可能会身处于不同的进程中,然而却可以高效地整合到一起,实现不同的用户需求.这就必须打破过去各个孤立App所形 ...

  3. Secure Spring REST API using Basic Authentication

    What is Basic Authentication? Traditional authentication approaches like login pages or session iden ...

  4. Ajax同步与异步优缺点与使用

    一.什么是同步请求:(false)       同步请求即是当前发出请求后,浏览器什么都不能做,必须得等到请求完成返回数据之后,才会执行后续的代码,相当于是排队,前一个人办理完自己的事务,下一个人才能 ...

  5. 循环节计算---用到find函数

    #include <iostream> #include <algorithm> #include <vector> using namespace std; in ...

  6. hbase练习题

    -- 配置环境变量,因为在hbase中有的地方可能用到了环境变量-- bin/start-hbase.sh-- bin/hbase shell-- 访问http://mini0:16010/ 可以看浏 ...

  7. redis数据类型List的安全队列和不安全队列

    在学习RPOPLPUSH命令的时候,官方文档中有提到安全队列和不安全的队列,一开始没有看懂,现在理解了做个笔记. 一般情况下,我们可以借助List来实现消息队列,比如一个客户端通过命令LPUSH(BL ...

  8. 内核补丁 patch

    https://www.kernel.org/diff/diffview.cgi?file=/pub/linux/kernel/v3.x/patch-3.18.12.xz

  9. openssl基础

    OpenSSL 是一个安全套接字层密码库,囊括主要的密码算法.常用的密钥和证书封装管理功能及SSL协议,并提供丰富的应用程序供测试或其它目的使用. OpenSSL is an open source ...

  10. google pr值查询接口

    PR(全称PageRank)是Google衡量一个网站的重要标准之一,从而影响Google搜索结果排名.Google官方提供了查询PR的API,如本站PR值:http://toolbarqueries ...