我想在用户输入 @ 时启用 jquery 自动完成答案

【问题标题】：I want to enable jquery autocomplete when user enters @我想在用户输入 @ 时启用 jquery 自动完成
【发布时间】：2010-08-27 11:21:14
【问题描述】：

当用户在文本框中输入 @ 以输入电子邮件地址时，我想使用 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>

【问题讨论】：

太多人在这里格式化！

标签： jquery email autocomplete

【解决方案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);
        }
    });
});

【讨论】：

它正在工作，但输入@符号后花费了太多时间。或者有时 autocomlte 确实会填充。
一切顺利，更快的解决方案... :)

【解决方案2】：

让我先清理一下你的代码：

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

【讨论】：

它不工作。我已将键事件用于@的用户输入，并且我确实禁用了 false，但它确实给了我自动完成功能。有什么问题。
我认为 event 可能是私有关键字，尝试将 function(event) 更改为 function(e)，否则代码看起来很完美，它必须是自动完成分机的问题；尝试使用 chrome 并点击Ctrl-Shift-J 打开控制台。