Créer une fonction de recherche multi début de mot

Version imprimable

23/03/2007, 18h14
Pakkaï

Créer une fonction de recherche multi début de mot

Bonjour à vous,

Après des recherches infructueuses sur le net, je viens ici vous exposer la fonction que je cherche à développer.

Voici donc la fonction je souhaite développer en Javascript :

Elément présent sur la page : un champ texte et la liste des communes de France en dessous affiché en liste
Contexte : dans un champ texte et au fur et à mesure de la saisie dans le champ
Fonction : retrouver les communes en recherche multi début de mot
Exemple :
Premier exemple : je tape ma première lettre "c" - toutes les villes commencant par "c" restent affiché, je continue ensuite avec les lettres "h" "a" "m" - toutes les villes commencant par "cham" reste affichées => complétion automatique
J'ai déjà développé cette fonction qui marche à merveille

Deuxième exemple : je tape toujours dans mon champs texte "cham" et ensuite "oi"

Code:

cham oi

je souhaite que ma fonction javascript puisse faire une recherche sur toutes les communes commencant par "cham", mais contenant aussi les mots commencant par "oi".

Le but étant de trouver la ville de Champapou oisifère ou celle de champigny sur oise (il faut en plus que la fonction ignore les particules)

Il existe bien sur d'autres techno pour le faire, mais je suis contraint de le faire en Javascript.

Avez vous des suggestions ou des pistes ?

Merci
23/03/2007, 18h23
Djakisback
Salut,
en plus de ton test sur le début de chaîne tu peux ajouter :
Code:

1 2 3 4 var keyword = "oi"; if(str.indexOf(keyword, 0) == -1) { // Tu supprimes l'option }
Bye
26/03/2007, 10h19
Pakkaï

Bonjour,

Merci pour cette réponse. Mais elle ne fonctionne que sur des variables bien précise. Dans ton exemple

Code:

var keyword = "oi";

Hors j'ai une liste de 32 750 communes avec des noms composés, donc je ne peux pas déclarer tous les variables possible et imaginable. En plus que tous les noms de villes ne sont pas en noms composés.

D'autres pistes ?

Merci
26/03/2007, 10h39
Bisûnûrs

Une RegExp en plus de ton code ?

Genre :

Code:

/\soi/i
26/03/2007, 10h58
cerede2000

Ben le probleme de la RegExp est que ca sortira tout les mot contenant "oi" par exemple :S La chose que tu veut faire demanderai un traitement enorme...
Parce que il faudrait prendre les mot commençant par "cham" les complété et regarder ensuite si il existe une suite a ces mot qui contienne "oi"
26/03/2007, 11h04
Bisûnûrs

Citation:

Envoyé par cerede2000

Ben le probleme de la RegExp est que ca sortira tout les mot contenant "oi" par exemple :S La chose que tu veut faire demanderai un traitement enorme...
Parce que il faudrait prendre les mot commençant par "cham" les complété et regarder ensuite si il existe une suite a ces mot qui contienne "oi"

Sauf que dans ma RegExp je vérifie qu'il y a un espace avant la chaîne "io" ... Donc c'est forcément le début d'un mot.
26/03/2007, 11h41
Pakkaï

Complément d'information

Pour que l'on puisse avoir un exemple concret voici un fonctionnement quasi complet de ce que je cherche :

http://www.ratp.fr

Dans les boutons radio sélectionnez "Station", puis faites une saisie dans le champ texte.

Je cherche la station "Noisy-le-grand - Mont d'Est".
En tapant "Noi" on se retrouve avec 7 stations et ma station est incluse. Ca c'est nickel.

Maintenant si je tape "Noi gra" pour trouver "Noisy-le-grand - Mont d'Est" ça ne marche pas :bug:
=> c'est cette fonction que je veux créer.

Merci
26/03/2007, 11h58
Bisûnûrs
Code:

1 2 3 function fonctionDExpressionReguliere(texte, param) { return /\sparam/i.test(texte) ; }
Retourne true dans le cas où c'est vérifié, false sinon.

http://jacques-guizol.developpez.com...Exp/RegExp.php
26/03/2007, 13h31
Djakisback

J'ai dû rater un truc :D
T'as une fonction qui filtre les communes sur le 1er mot-clé
Il te reste juste à filtrer parmi celles qui restent si elle contiennent les autres mot-clés.

En gros tu fais un explode en utilisant les espaces du champ des mot-clés, le 1er résultat du tableau va servir à filtrer le début des communes et les autres à filtrer ces dernières en fonction de si elles contiennent ou non les mot-clés.

L'algo c'est bien ?
keywords[0] = 'Noi'
keywords[1] = 'gra'
"résultat qui commence par keywords[0] et qui contient keywords[1], keywords[2], etc."
26/03/2007, 14h28
Pakkaï

Citation:

Envoyé par Djakisback

L'algo c'est bien ?
keywords[0] = 'Noi'
keywords[1] = 'gra'
"résultat qui commence par keywords[0] et qui contient keywords[1], keywords[2], etc."

Djakisback

C'est bien cela :king:

Tu as une piste à me donner par rapport à l'algo ? Es tu ok avec les RegExp ?

Merci

Salut,
bin en fait le plus simple est de faire comme je disais dans mon premier post, tu ajoutes un test avec str.indexOf() à ton test de début de chaîne.

Si tu optes pour les regex un truc comme ca devrait le faire :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <script> var str = "Noisy-le-grand - Mont d'Est"; var keywordStr = "Noi gri"; var keywords = keywordStr.split(new RegExp("[ ]+", "g")); var pattern = "^" + keywords[0]; for(var i = 1; i < keywords.length; i++) { pattern += ".*" + keywords[1]; } pattern += ".*$"; var reg = new RegExp(pattern, "gi"); if(reg.test(str) == true) { //tu laisses l'option } else { // tu supprimes } </script>
Bye

26/03/2007, 16h46
cerede2000

Au faite juste en passant ta liste elle est stocké ou dans un fichier?
http://bbjess.free.fr/bd/req.php
26/03/2007, 17h59
Pakkaï

Citation:

Envoyé par cerede2000

Au faite juste en passant ta liste elle est stocké ou dans un fichier?
http://bbjess.free.fr/bd/req.php

Salut,

Et bien ma liste est dans le fichier js avec le code de complétion

voici un extrait de la forme de stockage du fichier :

Code:

var listeCommunes = "|01000;AAST|01001;ABAINVILLE|01002;ABANCOURT|01003;ABANCOURT|01004;ABAUCOURT|01005;ABAUCOURT-HAUTECOURT|01006;ABBANS-DESSOUS|01007;ABBANS-DESSUS|01008;ABBARETZ|

Au passage, le lien que tu m'as passé est excellent. C'est ce que je cherche à faire, quand je tape "noi gra" et envoyer il me retourne le bon résultat. Maintenant je dois faire ça en javascript et non en php :(

Merci
26/03/2007, 20h32
cerede2000

Ce que je t'ai passe c'est de moi :D
Si jamais tu trouve ton script m'interesse :D

:aie: :aie: :aie: :aie: c'est casse gueule.
Je m'en sors pas avec les différentes méthodes que vous me proposez.

Voici un extrait de mon code. Pouvez vous m'aider et me dire comment mettre en place les différents type de code ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function completionLibelleCommune(valeur) {
	result ="";
	valeur = valeur.toUpperCase();
	idx = listeCommunes.indexOf(";" + valeur);
	compteurAffichage = 0;
	while (idx != -1) {
		idx2 = listeCommunes.indexOf("|",idx+1);
		idx3 = listeCommunes.lastIndexOf("|",idx-1);
		result += listeCommunes.substring(idx +1,idx2) + " (" + listeCommunes.substring(idx3+1,idx) + ")<br>";
		idx = listeCommunes.indexOf(";" + valeur,idx2 + 1);
		compteurAffichage += 1;
		if (compteurAffichage == 100) idx = -1;
	}
	return result;
}
 
var listeCommunes = "|01000;AAST|01001;ABAINVILLE|01002;ABANCOURT|";

Merci

27/03/2007, 18h48
Djakisback

Salut,
il faudrait voir le bout de code où tu modifies dynamiquement la liste multiple.

Je ne pense pas que cela aidera davantage, mais bon on sait jamais ;)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script language="javascript" type="text/javascript" src="script.js"></script>
 
<script language="javascript">		
	function recup(){
	creerDiv(completionLibelleCommune(document.getElementById('completion_text').value));
			}
	}
 
	function creerDiv(tab) {
		document.getElementById("donnees").innerHTML = tab;		
	}		
</script>
 
<input type="text"
class="texte"
id="completion_text"
name="completion_text"
onkeyup="recup();">
 
<div id="donnees">
	</div>

En fait je vois que ta fonction détecte pas le début de chaîne mais elle cherche le mot-clé dans toute la chaîne ? (t'utilises listeCommunes.indexOf(";" + valeur); donc que 'Noi' soit en début de chaîne ou au mileu Noisy va apparaître.), donc effectivement tu peux pas ajouter simplement un autre indexOf().

Voilà une soluce avec les regex, si tu comprends pas quelque chose, hésite pas :
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 datas = listeCommunes.split(new RegExp("\\|", "g")); function completionLibelleCommune(valeur) { result =""; valeur = valeur.toUpperCase(); reg1 = new RegExp("[ ]+", "g"); keywords = valeur.split(reg1); // Création du motif pattern = "^" + keywords[0]; for(i = 1; i < keywords.length; i++) { pattern += ".*" + keywords[1]; } pattern += ".*$"; reg2 = new RegExp(pattern, "gi"); reg3 = new RegExp(";", "g"); // Parcours du tableau for(i = 0; i < datas.length; i++) { commune = datas[i].split(reg3); if(reg2.test(commune[1])) { result += commune[1] + " (" + commune[0] + ")<br/>"; } } return result; }
Faut voir si c'est pas trop lent avec le tableau entier.

28/03/2007, 11h30
Pakkaï

Djakisback,

C'est... nickel:mouarf: :mouarf: :mouarf: ... mais pas pour les 36 720 lignes lol. Fallait s'y attendre, les perf sont pas top, je tourne au alentours de 15-20 secondes voir plus des fois pour qu'il me trouve ce que je cherche.
En faite sur la grande liste ça rame c'est normal comme j'ai mis les données dans une seule et unique variable. Est il possible d'optimiser le code à votre avis ?

Sinon bonne nouvelle, ça marche nickel quand je réduit ma liste des communes (je rappel, dans une variable) à 10 000, c'est pas mal.

Donc est il possible d'optimiser les perf en faisant autrement ?

Merci encore à tous.
28/03/2007, 11h47
cerede2000

Et bien pour augmenter les perfs il faut te tourné vers une solution BDD avec une page php qui fait une requête SQL ou autre et qui te renvoit un nombre limité de résultats ;)
28/03/2007, 11h50
Pakkaï

cerede2000,

C'est sur et certain ce que tu me dis la ;)

Mais ma figure de style doit se faire en Javascript lol.
28/03/2007, 11h53
cerede2000

Hum a la limite ce que tu pourrais faire meme si ca va etre super long a mettre en place c'est deja separé tes communes par lettres...
A
B
C
...
Et donc une variable pour chaque lettre, et donc quand tu cherche une commune, tu regarde sa premiere lettre et comme ca tu determine quel variable utilisé :S

Ok c'est ce que je craignais lol, tu peux tenter ca :

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
reg1 = new RegExp("[ ]+", "g");
reg3 = new RegExp(";", "g");
 
function completionLibelleCommune(valeur) {
	result ="";
	buffer = "";
	valeur = valeur.toUpperCase();
 
	// Création du tableau des mots-clés
	keywords = valeur.split(reg1);
	// Création du motif
	pattern = "^" + keywords[0];
	for(i = 1; i < keywords.length; i++)	{
		pattern += ".*" + keywords[1];
	}
	pattern += ".*$";
	reg2 = new RegExp(pattern, "gi");
 
	for(i = 0, char = null; i < listeCommunes.length; i++)	{
		char = listeCommunes[i];
		if(char == "|")	{
			datas = buffer.split(reg3);
			if(reg2.test(datas[1]))	{
				result += datas[1] + " (" + datas[0] + ")<br/>";
			}
			buffer = "";
		}
		else	{
			buffer += char;
		}
	}
	return result;
}

En fait il faudrait réduire la liste au fur et à mesure mais de toute façon la chaîne de départ est un peu grande. Si tu dois absolument rester en JS, la soluce de cerede2000 me semble pas mal ^^. Tu peux aussi utiliser un arbre.

28/03/2007, 14h58
Pakkaï

Djackisback,

La dernière implémentation plante carrément le navigateur (IE) :(

Je pense que le plus simple est de faire une regexp de chaine sur la variable. Car en tableau c'est pas possible de tenir la charge. La variable est une longue chaine composés de la manière suivante |code postal;nom-de-commune|
Le but étant de faire une recherche sur la chaine plutôt qu'un tableau.

J'essai d'optimiser de la manière suivante : \d{5};[a-zA-Z-]+| il trouve bien les codes postaux et déchiffre les noms des communes.
En faite le souci que j'ai maintenant c'est que je ne sais pas comment faire pour remplacer [a-zA-Z-] par deux chaines en dure.
Style \d{5};[chaine commençant par xxx, suivi par la chaine commencant par yyyy]|

Quelqu'un aurait une idée sans passer par des tableaux et en faisant une regexp du style : je cherche les codes postaux, puis je cherche les communes contenant les chaines que j'ai saisie dans mon champ ?

Merci
29/03/2007, 11h14
Pakkaï

:calim2: personne ?
29/03/2007, 13h11
Djakisback
Ce sera encore pire si tu lances une regex sur ta chaîne de 1Mo. Si tu veux tenter :
Code:

1 2 3 4 5 6 // Création du motif pattern = "([0-9]+)(;)" + "(" + keywords[0]; for(i = 1; i < keywords.length; i++) { pattern += "[-A-Z ]+" + keywords[1]; } pattern += "[-A-Z ]+)";
Comme dit précédemment le stockage dans un tableau associatif par lettre ou suite de lettre, ou l'utilisation d'un arbre me semble le plus adapté.
29/03/2007, 13h17
cerede2000

Et oui:mouarf:
29/03/2007, 14h26
Pakkaï

J'ai du rater quelque chose...

ca ne retourne aucun résultat, ni même aucune erreur.
Comment mets tu en place ton code dans ma fonction ?

J'en terminerai avec ce sujet sur ce point.

Merci

comme ca :

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
<script>
reg1 = new RegExp("[ ]+", "g");
 
function completionLibelleCommune(valeur) {
	result ="";
	div = document.getElementById("donnees");
 
	// Création du tableau des mots-clés
	keywords = valeur.split(reg1);
	// Création du motif
	pattern = "([0-9]+)(;)" + "(" + keywords[0];
	for(i = 1; i < keywords.length; i++)	{
		pattern += "[-A-Z ]+" + keywords[1];
	}
	pattern += "[-A-Z ]+)";
 
	reg2 = new RegExp(pattern, "gi");
	matches = listeCommunes.match(reg2);
 
	div.innerHTML = "";
	for(i = 0; i < matches.length; i++)	{
		div.innerHTML += matches[i] + "<br/>";
	}
}
</script>
 
<input type="text"
class="texte"
id="completion_text"
name="completion_text"
onKeyUp="completionLibelleCommune(this.value);">
 
<div id="donnees">
	</div>

La fonction intermédiaire creerDiv(tab) est pas une bonne idée car tu repasses la copie du valeur de grande taille.

29/03/2007, 17h16
Pakkaï

Merci,

ça marche mieux en terme de temps de consommation CPU à 100%.

Par contre en parallèle on a cherché avec la méthode match qui donne des résultats formidable en plus de notre ancienne méthode de recherche par string et index.

Encore merci à vous tous pour votre aide.

Fuseau horaire GMT +2. Il est actuellement 22h52.