JQuery autocomplete avec plusieurs mots-clés dans le champ de recherche

Version imprimable

J'essaie d'avoir un résultat dans la liste déroulante en fonction d'un mot clé qui est en réalité plusieurs chaînes espacées d'un espace chacune en m'inspirant de ce code https://stackoverflow.com/questions/...multiple-words, que j'adapte à mon code

Voici mon

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
function customFilter(array, terms) {
    arrayOfTerms = terms.split(" ");
 
    arrayOfTerms.forEach(function (entry) {
        array = $.grep(array, function (e) {
            return e.indexOf(entry) >= 0;
        })
    });
 
    return array;
}
 
$('#recherche').autocomplete({
 
    multiple: true,
    mustMatch: false,
    source: function( request, response ) {
        $.ajax( {
            dataType: "json",
            url: 'searchJSON.json',
            crossDomain : true,
          	data: {
            term: request.term
          },
          success: function( data ) {
        	var results = $.ui.autocomplete.filter(data, request.term);
			document.getElementById("count").innerHTML = results.length;
        	response(results.slice(0, 100));
          },
 
     focus: function() {
          return false;
          },
 
        } );
      },
 
    minLength : 0,
 
 
 
});

Et le

Code:

1
2
3
4
5
6
7
8
9
10
  		<form id="myform">
 
    	 <div class="form-group">
    	  <label for="tag">Critère : </label>
    	  <input type="text" id="recherche" />
    	  <input type="button" onclick="resetFields()" value="Reset" />
    	  <input type="button" value="Réinitialiser" id="refresh" /><span class="badge" id="count"></span>
  		 </div>
 
		</form>

J'essaie de mettre ma fonction customFilter dans mon code de saisie semi-automatique.

Merci de votre aide

27/12/2017, 13h54
mathieu

quel est la réponse que peux renvoyer l'URL "searchJSON.json".
montrez nous plusieurs exemples pour bien comprendre.

Cela renvoi un tableau comme suit :
Code:

1 2 3 [{"value":"", "label":"CAT | PDT*1999988O01 Charges de fonctionnement | 100 F/D Autres fourn. ", "cdc":"Charges de structure", "desc":"Modèle 12 , UO euros"}, {"value":"", "label":"CAT | PDT*1999445O01 Charges de fonctionnement | 177 F/D Autres prest. serv. ", "cdc":"Charges de structure ", "desc":"Modèle 12 , UO euros"}, {"value":"", "label":"CAT | PDT*1999488O01 Charges de fonctionnement | 102 F/D Charges externes ", "cdc":"Charges de structure ", "desc":"Modèle 12 , UO euros"}]
Ce que je souhaite c'est que quand je saisi CAT, cela présente les 3 lignes, quand je saisie CAT 102 (en respectant un espace séparateur), cela me donne une seule ligne, puisque c'est 2 mots clés cumulés sont présents seulement dans la troisième ligne du tableau.

bonsoir,

Citation:

Envoyé par Donalddeuk

Ce que je souhaite c'est que quand je saisi CAT, cela présente les 3 lignes, quand je saisie CAT 102 (en respectant un espace séparateur), cela me donne une seule ligne, puisque c'est 2 mots clés cumulés sont présents seulement dans la troisième ligne du tableau.

le mieux est de passer par une expression régulière, puis configurer les résultats selon le nombre d'espaces existants.
l'exemple ci-dessous est correcte si on écrit 2 mots comme (cat chiffre,cat caractère...)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
function Find(c){
var arr=c.texte.split(' '),Exp,returned=[];
switch(arr.length){
	case 1:
		Exp="^"+arr[0];
	break;
	case 2:
		if(arr[1].length>0){
			Exp="^"+arr[0]+"(.{1,}"+arr[1]+".{1,})+$";
		}else if(arr[1].length==0){
			Exp="^"+arr[0]+"(.{1,})+$";
		}
	break;
	case 3:
		console.log('cas pas encore configuré');
	break;
	console.log(Exp);
}
var Reg=new RegExp(Exp,'i');
	returned=$.grep(c.json,function(k,v){
		return Reg.test(k.label);
	});
 
	return returned;
}
function customFilter(array, terms) {
	return Find({json:array,texte:$('#recherche').val()}) ;
}
$(function(){
  $('#recherche').autocomplete({
 
		multiple: true,
		mustMatch: false,
		source: function( request, response ) {
			$.ajax( {
				dataType: "json",
				url: 'searchJSON.json',
				crossDomain : true,
				data: {
				term: request.term
			  },
			  cache:false,
			  success: function( data ) {
				var results=customFilter(data,request.term.toLowerCase());//GO ici
				$("#count").text( results.length+" résultat trouvé");
				response(results);
			  }
			  ,error:function(err){alert(err);}
			  ,focus: function() {
				return false;
			  }
 
			} );
		  }
 
 
 
	});
});

31/12/2017, 10h39
Donalddeuk

Ca fonctionne en effet, mais :
- le premier mot clé doit être obligatoirement "CAT" alors qu'il pourrait être une chaîne quelconque du contenu dans label
- au troisième mot clé, ça "plante" car j'ai 7 000 lignes dans le fichier json, du coup j'ai mis ce code

Code:

response(results.slice(0, 100));

pour limiter le nombre d'occurrences trouvées et que l'écran ne se fige pas. Je vais essayer d'interdire la saisie de plus de 2 chaines espacées par un espace.
Merci beaucoup pour ton aide,
31/12/2017, 12h01
Toufik83

Citation:

le premier mot clé doit être obligatoirement "CAT" alors qu'il pourrait être une chaîne quelconque du contenu dans label

dans ce cas, modifie l’expression régulière pour qu'elle cherche le mot n'importe ou dans la chaîne, qu'il soit au début, au milieu ou a la fin.

Oui du coup j'ai modifié comme suit :

Code:

1
2
3
4
5
6
7
8
9
10
	case 1:
		Exp=arr[0];
	break;
	case 2:
		if(arr[1].length>0){
			Exp=arr[0]+"(.{1,}"+arr[1]+".{1,})+$";
		}else if(arr[1].length==0){
			Exp=arr[0]+"(.{1,})+$";
		}
	break;