Discussion :

[PIEPLU]

Bonjour,

J'utilise habituellement la librairie jQuery et Autocomplete. Aujourd'hui, je dois mettre en place un trucs un peu particulier. Un autocomplete selon ce qui est saisie dans un textarea.

En gros, les utilisateurs peuvent écrire un message, et citer des utilisateurs du site. Pour se faire, ils utiliseront un arobase pour dire au code qu'on va être en présence.

"Salut @pierre, regarde cette article"

Et pierre qui est inscrit sur le site recevra un mail lui disant qu'il a été identifié sur un message.

Le souci, c'est que j'arrive pas à "délimiter" le texte à chercher dans l'autocomplete.

Voici ce que j'ai fait pour le moment.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$('.autocomplete-user').bind('change keydown keyup', function() {
    var dInput = $('.autocomplete-user').val();
    var res = dInput.slice(-1);
 
    if(res == '@') {
        $(".autocomplete-user").autocomplete({
            minLength: 3,
            delay: 100,
            source: function(request, response) {
                $.getJSON("/ajax/ajax-autocomplete-user.php", { pseudo: request.term }, response);
            }
        });
    }      
});

Merci de toute aide qui pourrait me débloquer.

[NoSmoking]

Bonjour,
tu cherches la position de l’occurrence de l'@ jusqu'à l'espace qui doit suivre.

Mais je ne suis pas sûr d'avoir capté ce que tu cherches à auto-compléter.

[PIEPLU]

tu cherches la position de l’occurrence de l'@ jusqu'à l'espace qui doit suivre.

C'est exactement là que je bloque lol

[NoSmoking]

Tu peux utiliser les regExp pour arriver à tes fins par exemple

Code :

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

1
2
3
4
5
6
7
8
9
var message = "Ces messages s'adressent à @Claude, @Jean et @Jean-Claude.";
var result  = message.match(/@[a-z\-]+/gi);
console.log(result);    // >> Array [ "@Claude", "@Jean", "@Jean-Claude" ]
// suppression de l'@
var i, nb = result.length;
for( i=0; i < nb; i += 1){
    result[i] = result[i].split('@').join('');
}
console.log(result);    // >> Array [ "Claude", "Jean", "Jean-Claude" ]

[PIEPLU]

Cette façon, je l'ai fait du côté de php. Je pense qu'on s'est pas bien compris, et j'en suis désolé.

J'essai d'être plus clair.

Dès que je saisie un @, je dois pouvoir lancer un autocomplete avec les données que je vais saisir à la suite. Si par exemple je reprend ton exemple, au moment où je vais écrire "@Clau", je dois proposer à mes utilisateurs les pseudos contenant "clau".

J'ai déjà fait la partie PHP avec le retour en JSON.

Tu vois mieux l'idée ?

Merci

[PIEPLU]

J'ai continué en faisant ainsi :

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
	$('.autocomplete-user').bind('change keydown keyup', function() {
		var dInput = $('.autocomplete-user').val();
		var pseudos = dInput.match('@[a-zA-Z0-9]+');
		if(pseudos) {
			for (var index = 0; index < pseudos.length; index++) {
				// console.log(pseudos[index]);
				var pseudo = pseudos[index];
				$(".autocomplete-user").autocomplete({
					minLength: 3,
					delay: 100,
					source: function(request, response) {
						pseudo = pseudo.replace("@", "");
						console.log(pseudo);
						$.getJSON("/ajax/ajax-autocomplete-user.php", { pseudo: pseudo}, function(result) {
							var results = $.ui.autocomplete.filter(result, pseudo);
							response(results.slice(0, 20));
						});
					}
				});				
			}
		}
	});

Mais il semble prendre en compte que le premier @pseudo que je saisie et pas les autres.

[PIEPLU]

Dernière version en cours :

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
$('.autocomplete-user').bind('change keydown keyup', function() {
    var dInput = $(this).val(),
        regex  = /@([a-zA-Z0-9_\-\\.]+)/ig,
        pseudos;
 
    var result = [];
 
while ((pseudos = regex.exec(dInput)) !== null) {
        result[result.length] = pseudos[1];
}
 
    if(result) {
        for (var index = 0; index < result.length; index++) {
            var pseudo = result[index];
            $(".autocomplete-user").autocomplete({
                minLength: 3,
                delay: 300,
                source: function(request, response) {
                    new_pseudo = pseudo.replace("@", "");
                    $.getJSON("/ajax/ajax-autocomplete-user.php", { pseudo: new_pseudo}, function(result) {
                        var results = $.ui.autocomplete.filter(result, new_pseudo);
                        response(results.slice(0, 10));
                    });
                },
                select: function( event, ui ) {
                    var terms = this.value.split(/,\s*/);
                    terms.pop();                       
                    var choice = dInput.replace(pseudo, ui.item.value);
                    terms.push(choice);
                    terms.push('');
                    this.value = terms.join(' ');
 
                    return false;
                }
            });            
        }
    }
});

Reste que lorsque je continue mon test après le dernier @ choisi, il continue de me proposer un autocomplete...

[NoSmoking]

Pas sûr que tu puisses ré-appliquer autant de $(".autocomplete-user").autocomplete({ que tu as d'occurrences trouvées sans effets de bord, en général ceci n'est déclaré qu'une fois.

Il existe, dans la documentation, Autocomplete Multiple values qui semble se rapprocher de ta problématique.