jQuery UI 實(shí)現(xiàn)email輸入提示實(shí)例
更新時(shí)間：2013年08月15日 16:29:27 作者：
本文為大家介紹下使用jQuery UI 實(shí)現(xiàn)email輸入提示，具體思路如下，感興趣的朋友可以參考下
效果：
使用了Jquery UI ,要導(dǎo)入的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();
//根據(jù)輸入的值，動態(tài)的創(chuàng)建下拉列表
$.each(emails, function (index,info){
if (inpVal.indexOf("@" )==-1)
{
//沒有輸入@
arrs[index]=inpVal+ "@" +info;
} else {
//輸入@
arrs[index]=inpVal.substring(0,inpVal.indexOf( "@" ))+"@" +info;
}
})
$( "#email" ).autocomplete({
//綁定下拉列表內(nèi)容
source: arrs
});
}
</script>
最后再來個(gè)文本框：
<input id="email" />
復(fù)制代碼 代碼如下:
使用了Jquery UI ,要導(dǎo)入的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();
//根據(jù)輸入的值，動態(tài)的創(chuàng)建下拉列表
$.each(emails, function (index,info){
if (inpVal.indexOf("@" )==-1)
{
//沒有輸入@
arrs[index]=inpVal+ "@" +info;
} else {
//輸入@
arrs[index]=inpVal.substring(0,inpVal.indexOf( "@" ))+"@" +info;
}
})
$( "#email" ).autocomplete({
//綁定下拉列表內(nèi)容
source: arrs
});
}
</script>
最后再來個(gè)文本框：
<input id="email" />
您可能感興趣的文章:
- jquery使用正則表達(dá)式驗(yàn)證email地址的方法
- jquery validation驗(yàn)證身份證號,護(hù)照,電話號碼,email(實(shí)例代碼)
- jQuery實(shí)現(xiàn)的Email中的收件人效果（按del鍵刪除）
- jquery 實(shí)現(xiàn)輸入郵箱時(shí)自動補(bǔ)全下拉提示功能
- jQuery 實(shí)現(xiàn)自動填充郵箱功能（帶下拉提示）
- jquery實(shí)現(xiàn)郵箱自動補(bǔ)全功能示例分享
- jquery validate添加自定義驗(yàn)證規(guī)則(驗(yàn)證郵箱 郵政編碼)
- jquery驗(yàn)證手機(jī)號碼、郵箱格式是否正確示例代碼
- jQuery實(shí)現(xiàn)Email郵箱地址自動補(bǔ)全功能代碼
相關(guān)文章
jQuery中ajax獲取數(shù)據(jù)賦值給頁面的實(shí)例
下面小編就為大家分享一篇jQuery中ajax獲取數(shù)據(jù)賦值給頁面的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
jquery實(shí)現(xiàn)帶縮略圖的可定制高度畫廊效果（5種）
這篇文章主要介紹了jquery可定制高度畫廊效果，很有藝術(shù)感，功能實(shí)現(xiàn)非常簡單，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
jquery3和layui沖突導(dǎo)致使用layui.layer.full彈出全屏iframe窗口時(shí)高度152px問題
這篇文章主要介紹了解決jquery3和layui沖突導(dǎo)致使用layui.layer.full彈出全屏iframe窗口時(shí)高度152px問題,需要的朋友可以參考下2019-05-05
jQuery 如何實(shí)現(xiàn)一個(gè)滑動按鈕開關(guān)
本文給大家分享一段jquery代碼實(shí)現(xiàn)滑動按鈕開關(guān)的效果，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的的朋友參考下2016-12-12
jquery漸隱漸顯的圖片幻燈閃爍切換實(shí)現(xiàn)方法
這篇文章主要介紹了jquery漸隱漸顯的圖片幻燈閃爍切換實(shí)現(xiàn)方法,實(shí)例分析了jQuery操作圖片的技巧及鼠標(biāo)事件用法,需要的朋友可以參考下2015-02-02
jQuery 重復(fù)加載錯(cuò)誤以及修復(fù)方法
本文主要記錄了在項(xiàng)目中遇到j(luò)Query重復(fù)加載導(dǎo)致依賴jQuery的js全部失效然后一步步分析，得出最終解決方案的全部過程，主要是記錄下來，提醒自己以后不要再犯相同錯(cuò)誤。2014-12-12
jQuery+CSS實(shí)現(xiàn)的標(biāo)簽頁效果示例【測試可用】
這篇文章主要介紹了jQuery+CSS實(shí)現(xiàn)的標(biāo)簽頁效果,涉及基于jQuery的事件綁定、頁面元素屬性動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-08-08
jQuery設(shè)置聚焦并使光標(biāo)位置在文字最后的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨Query設(shè)置聚焦并使光標(biāo)位置在文字最后的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
基于jQuery實(shí)現(xiàn)的打字機(jī)效果
本文主要分享了基于jQuery實(shí)現(xiàn)的打字機(jī)效果的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
jQuery在頁面加載時(shí)動態(tài)修改圖片尺寸的方法
這篇文章主要介紹了jQuery在頁面加載時(shí)動態(tài)修改圖片尺寸的方法,實(shí)例分析了jQuery操作圖片的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03