js를 사용한 퍼지 쿼리 예제에 대한 자세한 설명

이 글은 주로 퍼지 쿼리의 jjs 구현에 대한 자세한 예를 공유합니다. 모두에게 도움이 되기를 바랍니다.

1. 간략한 설명

퍼지 쿼리를 구현하는 방법은 여러 가지가 있습니다. 백엔드에서 구현할 수도 있고 프론트엔드에서 js를 사용하여 구현할 수도 있습니다.

백엔드 구현을 위해서는 입력 상자에서 검색된 키워드를 기반으로 백그라운드에서 SQL 문 쿼리를 연결해야 합니다.

프런트엔드는 문자열의 indexOf() 메서드나 정규식 일치 구현을 직접 사용합니다. 이 메서드의 백엔드 구현과 비교하면 사용자 경험이 더 친숙합니다.

2, 데모

입력창에 내용을 입력하거나 쿼리 버튼을 클릭하면
입력창에 있는 키워드를 기준으로 아래 테이블의 내용을 퍼지 쿼리하고 테이블을 다시 렌더링합니다.
코드는 다음과 같습니다.

(1) 자바스크립트 코드:

let listData = ["상하이시", "황푸구", "루완구", "쉬후이구", "창닝구", "징안구", "푸퉈구" ",
"자베이구", "양푸구", "홍커우구", "민항구", "바오산구", "가딩구", "푸동신구",
"진산구", "쑹장구", "Qingpu District" ","Nanhui District","Fengxian District","Chongming County" ];

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

관련 권장 사항:

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

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