Question

当用户在文本框中输入@以输入电子邮件地址时，我想使用 jQuery autocomplete

当用户输入@ 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>

Answer 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);
        }
    });
});

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

我想在用户输入@时启用jquery自动完成功能

2 个答案: