jQuery UI 实现email输入提示

Syliu

于 2013-08-14 18:06:35 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/a542214712/article/details/9968969

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何利用JQueryUI插件实现网页中输入框的邮箱地址自动补全功能。通过监听键盘事件并根据用户的输入动态生成下拉列表选项，提高用户体验。文章详细展示了所需导入的JQueryUI样式文件及核心脚本，并提供了完整的JavaScript实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

使用了Jquery UI ,要导入的js和css:
     <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
     <link rel="stylesheet" href="../demos.css">
     <script src="../../jquery-1.7.2.js"></script>
     <script src="../../ui/jquery.ui.core.js"></script>
     <script src="../../ui/jquery.ui.widget.js"></script>
     <script src="../../ui/jquery.ui.position.js"></script>
     <script src="../../ui/jquery.ui.autocomplete.js"></script>


    <script>
     var emails=["163.com","yahoo.com","yahoo.cn","126.com","sina.com"];
      $( function () {
             //为输入框绑定事件
            $( "#email" ).keyup( function(){
                  emailiInp();
            });
      });
       function emailiInp(){
            var arrs= new Array()
            inpVal=$( "#email" ).val();
               //根据输入的值，动态的创建下拉列表
            $.each(emails, function (index,info){
                      
                  if (inpVal.indexOf("@" )==-1)
                  {
                              //没有输入@
                        arrs[index]=inpVal+ "@" +info;
                  } else {
                              //输入@
                        arrs[index]=inpVal.substring(0,inpVal.indexOf( "@" ))+"@" +info;
                  }
            })
            $( "#email" ).autocomplete({
                      //绑定下拉列表内容
                  source: arrs
            });
      }
     </script>

最后再来个文本框：
<input id="email" />