2010-08-27 44 views
2

我想使用jQuery的自动完成当用户在文本框用于输入电子邮件地址输入@我想启用自动完成的jQuery用户时进入@

当用户输入@ afrer输入他的电子邮件ID域名列表像@gmail .com,hotmail.com,yahoo.com应为

已填充,以便用户可以选择它而不是从自动填充中输入。

我试过,但它不工作

我的代码是

<!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

人太多了,这里的格式! – RobertPitt 2010-08-27 11:25:39

回答

0

让我先清理码了一点:

$(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}); 
      } 
     }); 
    }); 

做了一些小的改进和代码清理,试试看。

另外,你甚至包括文献库?

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

它没有工作。我使用了@ 用户输入的关键事件,并且我禁用了false,但它确实给了我自动完成。 什么问题。 – user432843 2010-08-28 06:29:41

+0

我认为事件可能是一个私人关键字,尝试改变'功能(事件)'功能(E)',否则代码看起来很完美,它必须是自动完成分机的问题;尝试使用chrome并点击'Ctrl-Shift-J'打开控制台。 – RobertPitt 2010-08-28 12:39:07

1

这里,我们去:On jsfiddle.net

代码:

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

它正在工作,但输入@符号后需要太多时间。 或者有一段时间autocomlte确实填充。 – user432843 2010-08-30 04:39:29

+0

所有与更快的解决方案的最佳... :) – 2010-08-30 11:24:29