目前實(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)鍵詞查詢(xún)開(kāi)關(guān)(emptyRequest)，打開(kāi)則鼠標(biāo)點(diǎn)在輸入框內(nèi)即出現(xiàn)提示（當(dāng)下拉列表用），默認(rèn)為true（圖1）
3 支持關(guān)聯(lián)查詢(xún)，即當(dāng)前文本框的提示結(jié)果可依據(jù)頁(yè)面另一個(gè)元素的取值
  3.1 只支持一個(gè)關(guān)聯(lián)元素（即父元素），用參數(shù)parentID定義，（默認(rèn)null)
  3.2 在打開(kāi)了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 支持緩存最后查詢(xún)的結(jié)果。（頁(yè)面多個(gè)元素調(diào)用的情況下，同樣會(huì)判斷最后一次觸發(fā)提交的元素來(lái)確定是否使用緩存）
  4.1  目前只支持了緩存一個(gè)元素的一次結(jié)果，有時(shí)間的話(huà)可考慮擴(kuò)展成每個(gè)元素的最后一次查詢(xún)結(jié)果都緩存起來(lái)
5 默認(rèn)效果見(jiàn)圖1，包含：
  5.1 每項(xiàng)的文字描述
  5.2 每項(xiàng)的拼音簡(jiǎn)拼（如果有）
  5.3 每項(xiàng)對(duì)應(yīng)的數(shù)據(jù)庫(kù)的主鍵值（如果有），不可見(jiàn)
6 多列視圖，解決大量短信息的排列（比如人名），（圖2）
  6.1 用multi=false打開(kāi)
  6.2 拼音選項(xiàng)不可見(jiàn)
  6.3 主鍵值不可見(jiàn)，但是仍然存在
  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)的鍵盤(pán)命令有
  ↑ ←：上一條
  ↓ →：下一條
  ESC取消提示
  沒(méi)有攔截回車(chē)事件，會(huì)提交表單
9 對(duì)后臺(tái)返回的數(shù)據(jù)格式有要求，見(jiàn)插件內(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查詢(xún)，返回一個(gè)數(shù)組，里面包含了查詢(xún)條件和查詢(xún)結(jié)果（本插件返回值無(wú)查詢(xún)條件）
  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+打開(kāi)網(wǎng)站

圖一，默認(rèn)視圖

圖二，多列視圖

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

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

最新評(píng)論