Jquery autocomplete déclencheur de char spécial

J'ai le problème suivant:

Je dois faire une autocomplète spéciale avec jquery déclenché par char "@"

Le problème est que si je commence la boîte de texte avec @ il fonctionne, mais si j'entre @ après que j'écris certains caractères, cela ne fonctionne pas.

Comment cela doit fonctionner: -y écrire un texte et je veux ajouter quelqu'un de "utilisatoriJson", -para ajouter quelqu'un de "utilisatoriJson", je dois appuyer sur la touche @ et une liste déroulante automatique doit s'afficher, après que je sélectionne quelqu'un de la liste déroulante ou Je tape une étiquette complète de la liste déroulante, elle doit mettre de l'espace et me laisser continuer mon message

Comment puis-je faire ceci ?

Code que j'ai écrit:

var utilizatoriJson = <%=utilizatoriJson%>; $( '#textarea_mesaj_colaborare').autocomplete({ source: utilizatoriJson }) .autocomplete( "instance" )._renderItem = function( ul, item ) { return $( "<li>" ) .append( "<a>" + item.label + "</a>" ) .appendTo( ul ); } $( '#textarea_mesaj_colaborare').autocomplete("disable"); $('#textarea_mesaj_colaborare').keyup(function(){ if ($('#textarea_mesaj_colaborare').val()[$('#textarea_mesaj_colaborare').val().length-1]==='@'){ var inceput = $('#textarea_mesaj_colaborare').val().length; $( '#textarea_mesaj_colaborare').autocomplete("enable"); } }); 

Comme déjà mentionné, vous devriez avoir besoin de plusieurs mots ici.

Le lien vers la source originale a déjà été fourni ci-dessus. Donc, j'aimerais montrer ce que j'ai compris de votre doute.

Mais d'abord, permettez-moi de savoir si vous voulez avoir une autocomplétion comme après '@' toutes les étiquettes qui commencent par 'a' devraient donner des résultats qui ne commencent que par 'a' et non ceux qui contiennent 'a'.

Puisque je suppose que cela serait très utile, j'ai un code pour cette partie.

Votre HTML

 <div class="ui-widget"> <label for="tags">Tags: </label> <input id="tags" size="50"> </div> 

Votre JS

 $(function() { //Since you told that labels start with '@' var utilizatoriJson = [ {'label': "@ActionScript",'id':'1'}, {'label': "@Java",'id':'2'}, {'label': "@C++",'id':'3'}, {'label': "@Javascript",'id':'4'}, {'label': "@Python",'id':'5'}, {'label': "@BASIC",'id':'6'}, {'label': "@ColdFusion",'id':'7'}, {'label': "@Haskell",'id':'8'}, {'label': "@Lisp",'id':'9'}, {'label': "@Scala",'id':'10'} ]; function split( val ) { return val.split( / \s*/ ); } function extractLast( term ) { return split( term ).pop(); } $( "#tags" ) // don't navigate away from the field on tab when selecting an item .bind( "keydown", function( event ) { if ( event.keyCode === $.ui.keyCode.TAB && $( this ).autocomplete( "instance" ).menu.active ) { event.preventDefault(); } }) .autocomplete({ minLength: 1, source: function( request, response ) { // delegate back to autocomplete, but extract the last term var lastword = extractLast(request.term); // Regexp for filtering those labels that start with '@' var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( lastword ), "i" ); // Get all labels var labels = utilizatoriJson.map(function(item){return item.label;}); var results = $.grep(labels ,function( item ){ return matcher.test( item ); }); response( $.ui.autocomplete.filter( results, lastword ) ); }, focus: function() { // prevent value inserted on focus return false; }, select: function( event, ui ) { var terms = split( this.value ); // remove the current input terms.pop(); // add the selected item terms.push( ui.item.value ); // add placeholder to get the comma-and-space at the end terms.push( "" ); this.value = terms.join( " " ); return false; } }); }); 

Démo de travail: http://jsfiddle.net/AJmJt/2/

Si vous ne voulez pas quelque chose comme je l'ai dit, il n'est pas nécessaire de faire une correspondance avec RegExp, mais il faut voir si le mot commence par '@' ou non.

Code pour ce fonctionnement du comportement: http://jsfiddle.net/rPfY8/1/

Vous ne souhaitez pas désactiver / réactiver l'autocompris, car cela empêche le contrôle de ne rien faire. Vous pouvez le faire comme vous le proposez, mais il y a une autre approche. Jetez un oeil à l'exemple ici: http://jqueryui.com/autocomplete/#multiple

Cela devrait faire ce que vous cherchez, vous pouvez mettre à jour le filtre pour ne faire qu'une recherche "commence par"

Voici un exemple de JSFIDDLE de ce que je veux dire: http://jsfiddle.net/UhL5d/

Et le Javascript correspondant:

 $(function () { var availableTags = [ {value: 1, label: "@ActionScript" }, {value: 2, label: "@AppleScript" }, {value: 3, label: "@Asp" }, {value: 4, label: "@BASIC" }, {value: 5, label: "@C" } ]; function split(val) { return val.split(/\s/); } function extractLast(term) { return split(term).pop(); } $("#textarea_mesaj_colaborare").autocomplete({ source: function (request, response) { // delegate back to autocomplete, but extract the last term response($.ui.autocomplete.filter( availableTags, extractLast(request.term))); }, focus: function () { // prevent value inserted on focus return false; }, select: function (event, ui) { var terms = split(this.value); // remove the current input terms.pop(); // add the selected item terms.push(ui.item.label); // add placeholder to get the comma-and-space at the end terms.push(""); this.value = terms.join(" "); return false; } }); });