jQuery UI 实现email输入提示实例


Posted in Javascript onAugust 15, 2013

效果:
jQuery UI 实现email输入提示实例 

使用了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" />
Javascript 相关文章推荐
学习面向对象之面向对象的基本概念:对象和其他基本要素
Nov 30 Javascript
JS记录用户登录次数实现代码
Jan 15 Javascript
JSON中双引号的轮回使用过程中一定要小心
Mar 05 Javascript
asp.net+js实现金额格式化
Feb 27 Javascript
JavaScript中的闭包
Feb 24 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 Javascript
Vue-cli配置打包文件本地使用的教程图解
Aug 02 Javascript
Vue中使用sass实现换肤功能
Sep 07 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 Javascript
javascript中如何处理引号编码&amp;#034;
Aug 15 #Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 #Javascript
jquery ajax方式直接提交整个表单核心代码
Aug 15 #Javascript
js冒泡法和数组转换成字符串示例代码
Aug 14 #Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 #Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 #Javascript
Javascript中判断变量是数组还是对象(array还是object)
Aug 14 #Javascript
You might like
PHP提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
php curl选项列表(超详细)
2013/07/01 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
PHP实现生成推广海报的方法详解
2018/03/14 PHP
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
深入解析contentWindow, contentDocument
2013/07/04 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
Python反射的用法实例分析
2018/02/11 Python
Selenium鼠标与键盘事件常用操作方法示例
2018/08/13 Python
Centos7 下安装最新的python3.8
2019/10/28 Python
基于python使用tibco ems代码实例
2019/12/20 Python
Flask框架搭建虚拟环境的步骤分析
2019/12/21 Python
Python数组并集交集补集代码实例
2020/02/18 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
招标授权委托书样本
2014/09/23 职场文书
个人委托书范本汇总
2014/10/01 职场文书
店面出租协议书范本
2014/11/28 职场文书
三好学生事迹材料
2014/12/24 职场文书
诚信高考倡议书
2019/06/24 职场文书
golang slice元素去重操作
2021/04/30 Golang
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android