Autocomplete et Textarea

Version imprimable

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:

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.

17/05/2016, 16h52
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.
17/05/2016, 17h07
PIEPLU

Citation:

Envoyé par NoSmoking

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

C'est exactement là que je bloque lol

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

Code:

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" ]

17/05/2016, 21h01
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

J'ai continué en faisant ainsi :

Code:

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.

Dernière version en cours :

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
$('.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...

19/05/2016, 21h39
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.