Explication détaillée des exemples de requêtes floues utilisant js

Cet article partage principalement avec vous des exemples détaillés d'implémentation jjs de requêtes floues. Il est principalement partagé avec vous sous forme de code. J'espère qu'il pourra aider tout le monde.

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 l'avant.

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 les éléments suivants en fonction des mots-clés contenus dans la zone de saisie du contenu du tableau et restitue le tableau.
Le code est le suivant.

(1) code javascript :

let listData = ["Ville de Shanghai", "District de Huangpu", "District de Luwan", "District de Xuhui", "District de Changning", « District de Jing'an », « District de Putuo »,
« District de Zhabei », « District de Yangpu », « District de Hongkou », « District de Minhang », « District de Baoshan », « District de Jiading », « Nouveau district de Pudong » ,
« District de Jinshan », « District de Songjiang », « District de Qingpu », « District de Nanhui », « District de Fengxian », « Comté de Chongming » ];

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

Recommandations associées :

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

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!