jQuery UI 实现email输入提示

最新推荐文章于 2021-12-10 15:50:12 发布

原创最新推荐文章于 2021-12-10 15:50:12 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

1 篇文章

订阅专栏

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

效果：

使用了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" />