Ajouter attr pour AutoSuggest et Trigger @

Question

J'essaie de créer un nom d'utilisateur avec trigger @ et href pour que le nom d'utilisateur soit lié à leur page de profil. Je viens de créer un script php et cela fonctionne aussi, mais je n'ai pas beaucoup d'expérience avec jQuery, donc mon problème est que je ne sais pas comment ajouter l'URL pour le nom d'utilisateur.

Je veux que jQuery s'active quand un utilisateur tape @user ..... et quand il montre autosuggest, il doit y avoir un lien, même si vous tapez @user .., comme facebook. ce que je faisais maintenant:

$(function() { 

    //autocomplete 
    $("#username").autocomplete({ 
     $("#username").attr('href'), 
     source: "hassearch.php", 
     minLength: 1 
    });    

}); 

Mais ce n'est pas fonctionne tout à fait, si vous pouvez me aider comment cela fonctionne dans la bonne façon avec jQuery, je vous remercie et je peux apprendre beaucoup sur jQuery alors!

Mise à jour: J'ai trouvé un codage jQuery idéal: Implementing jquery UI autocomplete to show suggestions when you type "@" - Mais ma question est maintenant, comment puis-je charger le fichier php pour obtenir les utilisateurs dans la base de données?

Je veux charger le fichier php dans les balises:

var availableTags = [--> to load php file <--]; 

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).data("autocomplete").menu.active) { 
     event.preventDefault(); 
    } 
}).autocomplete({ 
    minLength: 0, 
    source: function(request, response) { 
     var term = request.term, 
      results = []; 

     /* If the user typed an "@": */ 
     if (term.indexOf("@") >= 0) { 
      term = extractLast(request.term); 
      /* If they've typed anything after the "@": */ 
      if (term.length > 0) { 
       results = $.ui.autocomplete.filter(
       availableTags, term); 
      /* Otherwise, tell them to start typing! */ 
      } else { 
       results = ['Start typing...']; 
      } 
     } 
     /* Call the callback with the results: */ 
     response(results); 
    }, 
    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; 
    } 
}); 

Answer 1

Juste pour épiloguer la solution que vous avez adopté:

L'option source de saisie semi-automatique jQuery UI est utilisé pour spécifier un tableau contenant les éléments qui doivent être affichés dans la liste déroulante une fois que le widget est déclenché. Il peut être défini comme un tableau, une fonction qui retourne un tel tableau, ou une URL vers une ressource qui produit un tel tableau.

Si le tableau qui devient finalement la valeur source est vide, le widget n'affiche pas de liste déroulante. Ainsi, définir source comme une fonction capable de renvoyer un tableau non vide seulement lorsque@ est entré rendra le widget se comporter comme vous le souhaitez. Et puisque c'est une fonction, vous pouvez vous procurer le tableau comme vous le souhaitez, en utilisant les données que vous souhaitez, y compris celles obtenues à partir d'un appel ajax dirigé vers un fichier php;).

Check out Mentionator si vous êtes à la recherche d'un produit existant qui utilise une telle fonction afin de fournir des fonctionnalités création et la gestion mention (une mention est une seule instance de ce que vous essayez de créer avec Autocomplete), ainsi que des fonctions auxiliaires utiles. Son maintenu par le vôtre vraiment :).