Exemple détaillé de la façon d'implémenter une requête floue dans js

Cet article partage principalement avec vous un exemple pour expliquer en détail comment implémenter des solutions de requêtes floues en js. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l’éditeur et jetons un coup d’œil.

1. Brève description

Il existe de nombreuses façons d'implémenter une requête floue, qui peut être implémentée sur le back-end et peut également être implémentée en utilisant js sur le front-end. .

La mise en œuvre du backend nécessite l'épissage des requêtes d'instructions SQL en arrière-plan en fonction des mots-clés recherchés dans la zone de saisie.

Le front-end utilise directement la méthode indexOf() d'implémentation de chaînes ou de correspondance d'expressions régulières, qui offre une expérience plus conviviale que l'implémentation back-end de cette méthode.

2. démo

Lorsque vous saisissez du contenu dans la zone de saisie ou cliquez sur le bouton de requête,
interrogez de manière floue le contenu du tableau ci-dessous en fonction des mots-clés contenus dans la saisie. boîte, et restituez le tableau.
Le code est le suivant.

(1) code 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. Téléchargement du code source

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

Recommandations associées :

Comment obtenir des résultats de requête flous

Implémentation frontale js d'une requête floue

Implémentation jQuery d'une requête floue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!