Discussion :

[Donalddeuk]

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 JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[mathieu]

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

[Donalddeuk]

Cela renvoi un tableau comme suit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Toufik83]

bonsoir,

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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,

[Toufik83]

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.

[Donalddeuk]

Oui du coup j'ai modifié comme suit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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;