js가 퍼지 쿼리를 구현하는 방법에 대한 자세한 예

이 기사는 js에서 퍼지 쿼리 솔루션을 구현하는 방법을 자세히 설명하기 위해 주로 예제를 공유합니다. 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다. 편집자를 따라가서 살펴보겠습니다.

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 = &#39;&#39;;   
            if(list.length==0){
              this.searchShow.innerHTML=&#39;未查询到关键字相关结果&#39;;
              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

관련 추천:

어떻게 퍼지 쿼리 결과 구현

js 퍼지 쿼리의 프런트 엔드 구현

jQuery로 구현된 퍼지 쿼리

위 내용은 js가 퍼지 쿼리를 구현하는 방법에 대한 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!