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