2010-09-24 12 views
0

Je fais référence le code du plugin autocomplete jQuery vu dans ce tutoriel: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/jQuery saisie semi-automatique, Comment accepter Trouvé et Unfound Conditions

Le problème avec ce tutoriel est qu'il supporte uniquement les éléments trouvés sur le serveur. Ce que je voudrais faire est de permettre à un utilisateur d'utiliser les éléments trouvés sur le serveur (comme cela fonctionne aujourd'hui) mais aussi de permettre à l'utilisateur de saisir de nouvelles valeurs sans casser le plugin ... Exemple, pour pouvoir entrer l'adresse email d'un utilisateur , appuyez sur Entrée, puis continuez à utiliser le plugin, peut-être alors trouver un autre élément sur le serveur et à nouveau frapper retour ..

Idées? Possible?

Répondre

2

Vous pouvez essayer d'ajouter ce qui est tapé à la liste des suggestions. De cette façon, ils peuvent essentiellement sélectionner ce qu'ils tapent en utilisant "req.term". Comme ceci:

//process response 
$.each(data, function(i, val){        
    suggestions.push(val.name); 
}); 
//append what has been typed in so it's available for selection 
suggestions.push(req.term); 
//pass array to callback 
add(suggestions); 

Puis, dans la sélection: fonction, vous pouvez insérer la sélection dans la base de données avec un appel ajax si elle n'existe pas déjà.

//define select handler 
select: function(e, ui) { 

    //create formatted friend 
    var friend = ui.item.value, 
     span = $("<span>").text(friend), 
     a = $("<a>").addClass("remove").attr({ 
      href: "javascript:", 
      title: "Remove " + friend 
     }).text("x").appendTo(span); 

    //add friend to friend div 
    span.insertBefore("#to"); 

    //insert selected email if doesn't already exists 
}, 

Voici un exemple keypress pour vous insérer ami formated sur entrez:

$("#to").keypress(function(e){ 
    var code = (e.keyCode ? e.keyCode : e.which); 
    if (code == 13) { //Enter keycode 
     e.preventDefault(); 

     //create formatted friend 
     var friend = $(this).val(), 
      span = $("<span>").text(friend), 
      a = $("<a>").addClass("remove").attr({ 
       href: "javascript:", 
       title: "Remove " + friend 
      }).text("x").appendTo(span); 

     //add friend to friend div 
     span.insertBefore("#to"); 

     $(this).autocomplete('close'); 
    } 
}); 
+0

C'est une idée intéressante, merci .. Le souci de qui elle diffère de la norme facebook, qui ces jours-ci signifie la norme . Est-il possible de voir où lorsque l'utilisateur appuie sur Retour ou entre une virgule, l'entrée est transformée en un AMI? – AnApprentice

+0

Oui, vérifiez mon échantillon mis à jour. Je pense que cela fonctionnera, mais vous devrez peut-être jouer avec. – fehays