自制基于jQuery的智能提示插件一枚
更新時(shí)間:2011年02月18日 01:07:08 作者:
一個(gè)ajax智能提示/補(bǔ)全插件,以前自己用的,現(xiàn)在干脆把它做成插件,需要的朋友可以參考下。
目前實(shí)現(xiàn)如下功能:
1 最基本需求,根據(jù)當(dāng)前文本框字符取出適配數(shù)據(jù)
1.1 支持同一頁(yè)面多個(gè)元素調(diào)用本插件
1.2 必需的參數(shù)是url
1.3 對(duì)于連續(xù)不斷地輸入,會(huì)把之前的ajax請(qǐng)求全部取消,避免造成服務(wù)器無(wú)謂的壓力(圖4)
1.4 最基本調(diào)用$("myel").autoCmpt({url:"url"});
2 空關(guān)鍵詞查詢開關(guān)(emptyRequest),打開則鼠標(biāo)點(diǎn)在輸入框內(nèi)即出現(xiàn)提示(當(dāng)下拉列表用),默認(rèn)為true(圖1)
3 支持關(guān)聯(lián)查詢,即當(dāng)前文本框的提示結(jié)果可依據(jù)頁(yè)面另一個(gè)元素的取值
3.1 只支持一個(gè)關(guān)聯(lián)元素(即父元素),用參數(shù)parentID定義,(默認(rèn)null)
3.2 在打開了parentID選項(xiàng)的情況下,假如參數(shù)定義useParentValue=false(默認(rèn)),則插件會(huì)取其自定義屬性進(jìn)行過(guò)濾(關(guān)聯(lián)),否則(true),會(huì)取該元素的value屬性關(guān)聯(lián)
3.2.1 鑒于上述情況,在useParentValue屬性為假時(shí),該元素必須為調(diào)用了本插件的元素,
3.2.2 當(dāng)useParentValue屬性為真是,該元素必須為表單元素(即必須有value屬性),但不必要是智能提示元素
3.2.3 不定義parentID,則此項(xiàng)無(wú)意義
3.2.4 定義了parentID的情況下,必須parent元素有值,否則也不會(huì)出現(xiàn)提示
4 支持緩存最后查詢的結(jié)果。(頁(yè)面多個(gè)元素調(diào)用的情況下,同樣會(huì)判斷最后一次觸發(fā)提交的元素來(lái)確定是否使用緩存)
4.1 目前只支持了緩存一個(gè)元素的一次結(jié)果,有時(shí)間的話可考慮擴(kuò)展成每個(gè)元素的最后一次查詢結(jié)果都緩存起來(lái)
5 默認(rèn)效果見圖1,包含:
5.1 每項(xiàng)的文字描述
5.2 每項(xiàng)的拼音簡(jiǎn)拼(如果有)
5.3 每項(xiàng)對(duì)應(yīng)的數(shù)據(jù)庫(kù)的主鍵值(如果有),不可見
6 多列視圖,解決大量短信息的排列(比如人名),(圖2)
6.1 用multi=false打開
6.2 拼音選項(xiàng)不可見
6.3 主鍵值不可見,但是仍然存在
6.4 只有在取出的記錄數(shù)大于32時(shí)才可用(4*8,目前這個(gè)值不可配,跟CSS強(qiáng)關(guān)聯(lián)了,假如你更改了CSS,主要指提示框的寬度,那么請(qǐng)自行更改成合適的效果)。
7 數(shù)據(jù)過(guò)多可分頁(yè)
8.1 目前不支持配置每頁(yè)顯示數(shù)
8.2 目前不支持往回翻頁(yè)
8.3 如果該元素選項(xiàng)為multi=true,會(huì)智能判斷下一頁(yè)條目數(shù)量,達(dá)到數(shù)量條件會(huì)自動(dòng)變成多列視圖,否則會(huì)恢復(fù)默認(rèn)視圖(圖3)
8 響應(yīng)的鍵盤命令有
↑ ←:上一條
↓ →:下一條
ESC取消提示
沒(méi)有攔截回車事件,會(huì)提交表單
9 對(duì)后臺(tái)返回的數(shù)據(jù)格式有要求,見插件內(nèi)說(shuō)明,目前實(shí)現(xiàn)四個(gè)字段:id,文字,拼音,上級(jí)id,哪怕沒(méi)有值,也要送個(gè)空值回來(lái)
9.1 就小項(xiàng)目用用,所以沒(méi)有做過(guò)多擴(kuò)展,否則可以像google一樣,預(yù)留相當(dāng)多的字段,以及用多維數(shù)組返回結(jié)果,現(xiàn)在這個(gè)做普通提示完全夠用了,歡迎自己擴(kuò)展
10 一般網(wǎng)站方案:
10.1 google采用的是普通的ajax查詢,返回一個(gè)數(shù)組,里面包含了查詢條件和查詢結(jié)果(本插件返回值無(wú)查詢條件)
10.2 baidu采用的ajax返回的是script,把結(jié)果做為script的參數(shù)傳進(jìn)來(lái)再自動(dòng)執(zhí)行了
10.3 酷訊采用的是jQuery的jsonp方式,以callback的方式返回結(jié)果集(一般我用jsonp的時(shí)候是為了跨域,即處理請(qǐng)求的域名和當(dāng)前頁(yè)面域名不一致,瀏覽器會(huì)阻止提交)。
10.4 本插件采用的是第一種方案。如果智能提示源不在本域,可參照百度、酷訊等的方式進(jìn)行更改
11 下載地址:本地下載
SVN:http://jq-intellisense-autocomplete.googlecode.com/svn/trunk/
注:下載下來(lái)的示例項(xiàng)目是一個(gè)asp.net網(wǎng)站,需要.net framework3.5支持,發(fā)布到iis上即可運(yùn)行,或用vs2008+打開網(wǎng)站
1 最基本需求,根據(jù)當(dāng)前文本框字符取出適配數(shù)據(jù)
1.1 支持同一頁(yè)面多個(gè)元素調(diào)用本插件
1.2 必需的參數(shù)是url
1.3 對(duì)于連續(xù)不斷地輸入,會(huì)把之前的ajax請(qǐng)求全部取消,避免造成服務(wù)器無(wú)謂的壓力(圖4)
1.4 最基本調(diào)用$("myel").autoCmpt({url:"url"});
2 空關(guān)鍵詞查詢開關(guān)(emptyRequest),打開則鼠標(biāo)點(diǎn)在輸入框內(nèi)即出現(xiàn)提示(當(dāng)下拉列表用),默認(rèn)為true(圖1)
3 支持關(guān)聯(lián)查詢,即當(dāng)前文本框的提示結(jié)果可依據(jù)頁(yè)面另一個(gè)元素的取值
3.1 只支持一個(gè)關(guān)聯(lián)元素(即父元素),用參數(shù)parentID定義,(默認(rèn)null)
3.2 在打開了parentID選項(xiàng)的情況下,假如參數(shù)定義useParentValue=false(默認(rèn)),則插件會(huì)取其自定義屬性進(jìn)行過(guò)濾(關(guān)聯(lián)),否則(true),會(huì)取該元素的value屬性關(guān)聯(lián)
3.2.1 鑒于上述情況,在useParentValue屬性為假時(shí),該元素必須為調(diào)用了本插件的元素,
3.2.2 當(dāng)useParentValue屬性為真是,該元素必須為表單元素(即必須有value屬性),但不必要是智能提示元素
3.2.3 不定義parentID,則此項(xiàng)無(wú)意義
3.2.4 定義了parentID的情況下,必須parent元素有值,否則也不會(huì)出現(xiàn)提示
4 支持緩存最后查詢的結(jié)果。(頁(yè)面多個(gè)元素調(diào)用的情況下,同樣會(huì)判斷最后一次觸發(fā)提交的元素來(lái)確定是否使用緩存)
4.1 目前只支持了緩存一個(gè)元素的一次結(jié)果,有時(shí)間的話可考慮擴(kuò)展成每個(gè)元素的最后一次查詢結(jié)果都緩存起來(lái)
5 默認(rèn)效果見圖1,包含:
5.1 每項(xiàng)的文字描述
5.2 每項(xiàng)的拼音簡(jiǎn)拼(如果有)
5.3 每項(xiàng)對(duì)應(yīng)的數(shù)據(jù)庫(kù)的主鍵值(如果有),不可見
6 多列視圖,解決大量短信息的排列(比如人名),(圖2)
6.1 用multi=false打開
6.2 拼音選項(xiàng)不可見
6.3 主鍵值不可見,但是仍然存在
6.4 只有在取出的記錄數(shù)大于32時(shí)才可用(4*8,目前這個(gè)值不可配,跟CSS強(qiáng)關(guān)聯(lián)了,假如你更改了CSS,主要指提示框的寬度,那么請(qǐng)自行更改成合適的效果)。
7 數(shù)據(jù)過(guò)多可分頁(yè)
8.1 目前不支持配置每頁(yè)顯示數(shù)
8.2 目前不支持往回翻頁(yè)
8.3 如果該元素選項(xiàng)為multi=true,會(huì)智能判斷下一頁(yè)條目數(shù)量,達(dá)到數(shù)量條件會(huì)自動(dòng)變成多列視圖,否則會(huì)恢復(fù)默認(rèn)視圖(圖3)
8 響應(yīng)的鍵盤命令有
↑ ←:上一條
↓ →:下一條
ESC取消提示
沒(méi)有攔截回車事件,會(huì)提交表單
9 對(duì)后臺(tái)返回的數(shù)據(jù)格式有要求,見插件內(nèi)說(shuō)明,目前實(shí)現(xiàn)四個(gè)字段:id,文字,拼音,上級(jí)id,哪怕沒(méi)有值,也要送個(gè)空值回來(lái)
9.1 就小項(xiàng)目用用,所以沒(méi)有做過(guò)多擴(kuò)展,否則可以像google一樣,預(yù)留相當(dāng)多的字段,以及用多維數(shù)組返回結(jié)果,現(xiàn)在這個(gè)做普通提示完全夠用了,歡迎自己擴(kuò)展
10 一般網(wǎng)站方案:
10.1 google采用的是普通的ajax查詢,返回一個(gè)數(shù)組,里面包含了查詢條件和查詢結(jié)果(本插件返回值無(wú)查詢條件)
10.2 baidu采用的ajax返回的是script,把結(jié)果做為script的參數(shù)傳進(jìn)來(lái)再自動(dòng)執(zhí)行了
10.3 酷訊采用的是jQuery的jsonp方式,以callback的方式返回結(jié)果集(一般我用jsonp的時(shí)候是為了跨域,即處理請(qǐng)求的域名和當(dāng)前頁(yè)面域名不一致,瀏覽器會(huì)阻止提交)。
10.4 本插件采用的是第一種方案。如果智能提示源不在本域,可參照百度、酷訊等的方式進(jìn)行更改
11 下載地址:本地下載
SVN:http://jq-intellisense-autocomplete.googlecode.com/svn/trunk/
注:下載下來(lái)的示例項(xiàng)目是一個(gè)asp.net網(wǎng)站,需要.net framework3.5支持,發(fā)布到iis上即可運(yùn)行,或用vs2008+打開網(wǎng)站
圖一,默認(rèn)視圖

圖二,多列視圖

圖三,當(dāng)圖二的情況下繼續(xù)輸入或翻頁(yè),結(jié)果少于單頁(yè)時(shí),自動(dòng)恢復(fù)默認(rèn)視圖

圖四,演示連續(xù)輸入情況下取消之前的ajax請(qǐng)求

您可能感興趣的文章:
- 基于jQuery的彈出警告對(duì)話框美化插件(警告,確認(rèn)和提示)
- JQuery擴(kuò)展插件Validate—4設(shè)置錯(cuò)誤提示的樣式
- jQuery 表單驗(yàn)證插件formValidation實(shí)現(xiàn)個(gè)性化錯(cuò)誤提示
- qTip2 精致的基于jQuery提示信息插件
- jQuery 插件仿百度搜索框智能提示(帶Value值)
- jQuery帶箭頭提示框tooltips插件集錦
- JQuery實(shí)現(xiàn)簡(jiǎn)單時(shí)尚快捷的氣泡提示插件
- jquery.cvtooltip.js 基于jquery的氣泡提示插件
- jQuery提示插件alertify使用指南
- jquery插件制作 提示框插件實(shí)現(xiàn)代碼
- jquery formValidator插件ajax驗(yàn)證 內(nèi)容不做任何修改再離開提示錯(cuò)誤的bug解決方法
- jQuery提示插件qTip2用法分析(支持ajax及多種樣式)
相關(guān)文章
基于jquery trigger函數(shù)無(wú)法觸發(fā)a標(biāo)簽的兩種解決方法
下面小編就為大家分享一篇基于jquery trigger函數(shù)無(wú)法觸發(fā)a標(biāo)簽的兩種解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
基于Jquery+div+css實(shí)現(xiàn)彈出登錄窗口(代碼超簡(jiǎn)單)
這篇文章給大家介紹基于jquery div css三者相結(jié)合實(shí)現(xiàn)彈出登錄窗口,實(shí)現(xiàn)大致思路是這樣的:通過(guò)dispaly:none屬性先隱藏在顯示,感興趣的朋友一起看看代碼實(shí)現(xiàn)過(guò)程吧2015-10-10
jquery實(shí)現(xiàn)奇偶行賦值不同css值
通常為了讓頁(yè)面呈現(xiàn)的更為美觀,我們喜歡在奇偶行加上不同的顏色2012-02-02
js jquery驗(yàn)證銀行卡號(hào)信息正則學(xué)習(xí)
銀行卡號(hào)格式驗(yàn)證如何錯(cuò)誤將提示:格式錯(cuò)誤,應(yīng)該是19位數(shù)字,利用正則實(shí)現(xiàn),感興趣的朋友可以了解下,希望本文對(duì)你學(xué)習(xí)正則有所幫助2013-01-01

