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 相关文章推荐
说说JSON和JSONP 也许你会豁然开朗
Sep 02 Javascript
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
js跳转页面方法实现汇总
Feb 11 Javascript
angularJS中$apply()方法详解
Jan 07 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
Vue.js组件通信的几种姿势
Oct 23 Javascript
javascript填充默认头像方法
Feb 22 Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 Javascript
Javascript实现时间倒计时功能
Nov 17 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 var_export与var_dump 输出的不同
2013/08/09 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
基于jquery的loading效果实现代码
2010/11/05 Javascript
弹出最简单的模式化遮罩层的js代码
2013/12/04 Javascript
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
js实现简单的手风琴效果
2017/02/27 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
Vue实现底部侧边工具栏的实例代码
2018/09/03 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
详解 Python 与文件对象共事的实例
2017/09/11 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
python实现维吉尼亚加密法
2019/03/20 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
基于Python绘制个人足迹地图
2020/06/01 Python
python中的测试框架
2020/11/13 Python
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
机械工程师求职自我评价
2013/09/23 职场文书
护士自我鉴定总结
2014/03/24 职场文书
活动总结怎么写啊
2014/05/07 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
2015大学生实训报告
2014/11/05 职场文书
校运会新闻稿
2015/07/17 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书
排查MySQL生产环境索引没有效果
2022/04/11 MySQL