2025年js实现模糊查询

编程汇总 • 2025-06-30 14:40 • 阅读 118

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
            //如果字符串中不包含目标字符会返回-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
              colStr+=""+list[i]+"";

            }

            this.searchShow.innerHTML = colStr;

      }

}

 new Fuzzysearch(listData);

3、源码下载

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

如果对您有帮助的话，记得帮我star哦（ღ( ´･ᴗ･` )）

☞日益努力，而后风生水起。众生皆苦，你也不能认输！！！

2025年js实现模糊查询

相关推荐