jsを使ったファジークエリ例を詳しく解説

この記事では、ファジー クエリの jjs 実装の詳細な例を主にコードの形で紹介します。皆さんのお役に立てれば幸いです。

1. 簡単な説明

ファジークエリを実装するには、バックエンドで実装することも、フロントエンドで js を使用して実装することもできます。

バックエンドの実装では、入力ボックスで検索されたキーワードに基づいて、バックグラウンドで SQL ステートメント クエリを結合する必要があります。

フロントエンドは、文字列または正規表現一致の実装のindexOf()メソッドを直接使用します。このメソッドのバックエンド実装と比較して、ユーザーエクスペリエンスはよりフレンドリーです。

2、デモ

入力ボックスに内容を入力するか、クエリボタンをクリックすると、
入力ボックス内のキーワードに基づいて、以下のテーブルの内容をファジークエリして、テーブルを再レンダリングします。
コードは次のとおりです。

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

関連推奨事項:

js でファジー クエリを実装する方法の詳細な例

以上がjsを使ったファジークエリ例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。