利用jquery-ui插件，做输入邮箱时邮箱自动补全功能

来源：互联网发布：多空通道指标源码编辑：程序博客网时间：2024/06/10 01:27

1. 首先需要到www.jqueryui.com网站上下载最新版的ui插件，到www.jquery.com上面下载最新版的jquery框架，并引入到html文件中，一般的为jquery-ui.js文件，一个jquery-ui.css文件和jquery.js文件

2. html文件代码如下：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="jquery.js"></script><script src="jquery-ui.js"></script>          <script src="index.js"></script><link rel="stylesheet" href="jquery-ui.css" type="text/css"/></head><body><div id="reg" title="会员注册"><label for="email">邮箱：</label><input type="text" class="text" name="email" id="email" title="请输入正确的邮箱地址"/></div></body>

3. index.js 文件代码如下

$(function(){        $('#email').autocomplete({delay:0,autoFocus:true,source:function(request,response){var hosts=['qq.com','163.com','263.com','sina.com','gmail.com','126.com'],term=request.term,//获取用户输入的内容name=term,//邮箱的用户host='',//邮箱的域名ix=term.indexOf('@'),//@的位置result=[];//最终呈现的邮箱列表result.push(term);//当有@的时候，重新分用户名和域名if(ix>-1){name=term.slice(0,ix);host=term.slice(ix+1);}if(name){//如果用户已经输入@和后面的域名,就找到相关的域名提示，//如果用户还没有输入@后面的域名，那么就把所有的域名都提示出来var findedHosts=(host?$.grep(hosts,function(value,index){return value.indexOf(host)>-1}):hosts);var findedResult=$.map(findedHosts, function(value,index){return name+'@'+value;});result=result.concat(findedResult);}response(result);}});});

这样子就完成了邮箱自动补全的功能，赶快试一试吧！~

阅读全文

0 0