2010-08-27 1 views
2

Je veux utiliser jQuery autocomplete lorsque l'utilisateur entrez @ dans zone de texte pour entrer l'adresse e-mailJe veux permettre jquery autocomplete lorsque l'utilisateur entre @

lorsque l'utilisateur entrez @ afrer tapant son identifiant email la liste des noms de domaine comme @gmail .com, hotmail.com, yahoo.com doit être

rempli de sorte que l'utilisateur puisse le sélectionner au lieu de le taper à partir de la saisie semi-automatique.

J'ai essayé, mais il ne fonctionne pas

mon code est

<!DOCTYPE html> 
<html> 
<head> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

    <script type="text/javascript"> 

    $(document).ready(function() { 

     var autocompOpts = { 
      minChars:0, 
      matchSubset:false, 
      matchContains: true, 
      disabled: true, 
      source : ["@gmail.com", "@yahoo-inc.com", "@yahoo.com", "@yahoo.co.in", "@rediff.com", "@rediffmail.com", "@hotmail.com", "@msn.com", ]   
     };  

     $("input#autocomplete").autocomplete(autocompOpts); 

     $("input#autocomplete").bind('keyup', function(event) { 

      if(event.shiftKey==1) 
      { 
       if(event.keyCode==50) 
       {  
        $("input#autocomplete").autocomplete("option", "disabled", false); 
        var opt = $("input#autocomplete").autocomplete("option", "disabled"); 
        alert(opt); 
       } 
      } 
     }); 
    }); 
    </script> 
</head> 
<body style="font-size:62.5%;"> 
    <center> 
<input id="autocomplete" /> 

</body> 
</html> 
+0

Trop de gens ici le formatage! – RobertPitt

Répondre

0

Permettez-moi d'abord nettoyer votre code un peu:

$(document).ready(function() 
{ 
     var autocompOpts = { 
      minChars:0, 
      matchSubset:false, 
      matchContains: true, 
      disabled: true, 
      source :[ 
       "@gmail.com", 
       "@yahoo-inc.com", 
       "@yahoo.com", 
       "@yahoo.co.in", 
       "@rediff.com", 
       "@rediffmail.com", 
       "@hotmail.com", 
       "@msn.com" 
      ] 
     }; 

     var input = $("#autocomplete"); 
     input.autocomplete(autocompOpts); 

     input.bind('keyup', function(event) 
     { 
      if(event.shiftKey == 1 && event.keyCode == 50) 
      { 
       input.autocomplete({disabled: false}); 
      } 
     }); 
    }); 

fait quelques petites corrections et nettoyage de code, Essayez ça.

Également, avez-vous même inclus la librairie?

<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script> 
+0

Ça ne marche pas. J'ai utilisé l'événement clé pour l'entrée d'utilisateur de @ et j'ai désactivé pour false mais cela me donne la saisie semi-automatique. Quel est le problème. – user432843

+0

Je pense que l'événement pourrait être un mot-clé privé, essayez de changer 'function (event)' 'function (e)', sinon le code semble parfait, il doit y avoir un problème avec l'autocomplete ext; essayez d'utiliser chrome et appuyez sur Ctrl-Maj-J pour ouvrir la console. – RobertPitt

1

Ici, nous aller: On jsfiddle.net

Le code:

$(document).ready(function() { 
    var autocompOpts = { 
     minChars:0, 
     matchSubset:false, 
     matchContains: true, 
     source : [] 
    }; 

    var domains = [ 
     "@gmail.com", 
     "@yahoo-inc.com", 
     "@yahoo.com", 
     "@yahoo.co.in", 
     "@rediff.com", 
     "@rediffmail.com", 
     "@hotmail.com", 
     "@msn.com" 
    ]; 

    var input = $("#autocomplete"); 
    input.autocomplete(autocompOpts); 

    input.bind('keyup', function(event) { 
     if (event.shiftKey == 1 && event.keyCode == 50) { 
      var userName = $(this).val(); 
      userName = userName.substring(0, userName.length - 1); 
      var emailIDs = []; 
      $.each(domains, function(index,domain){ 
       emailIDs.push(userName + domain); 
      }); 
      autocompOpts.source = emailIDs; 
      $(this).autocomplete(autocompOpts); 
     } 
    }); 
}); 
+0

Cela fonctionne mais cela prend trop de temps après l'entrée du symbole @. Ou un certain temps, l'autocomlte se remplit. – user432843

+0

Tout le meilleur avec une solution plus rapide ... :) –