js实现模糊查询

js实现模糊查询1、简述实现模糊查询方法有很多种,后端可以实现,前端使用js也可以实现。后端实现起来需要根据输入框中搜索的关键字,去后台拼接SQL语句查询。前端直接使用字符串的indexOf()方法或者正则表达式匹配实现,相比后端实现这种方法的用户体验更友好。2、demo当输入框中输入内容或者点击查询按钮时,根据输入框中的关键字,模糊查询下面表格的内容,并重新渲染表格。代码如下。(1)…

大家好,又见面了,我是你们的朋友全栈君。

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);

3、源码下载

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

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/139221.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号