ホームページ > 記事 > ウェブフロントエンド > jsでファジークエリを実装する方法の詳細な例
この記事は主に、js でファジー クエリ ソリューションを実装する方法を詳細に説明する例を共有するものであり、非常に参考になるので、皆様のお役に立てれば幸いです。編集者をフォローして見てみましょう。
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 = ''; 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
関連する推奨事項:
以上がjsでファジークエリを実装する方法の詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。