自製jQuery智慧型提示外掛程式一枚

2011-9-2更新：

增加width屬性，每個同乙個頁面每個智慧型提示視窗可自定義
增加hidden屬性，用來儲存智慧型提示結果對應的id，請傳入乙個具有value屬性的form元素，比如hidden,input等
可以為dom元素，也可以為jquery物件
, 以前是需要自己取該文字框的qid
現在同樣可以在提交前值qid賦值給自定義的元素
改善儲存id的流程
所有取結果對應的id的，都是為了傳遞結果對應的資料庫主鍵
假如僅僅是用文字框裡面的字元進行模糊匹配，這些選項都無意義
此次修改主要優化了對隱藏id的處理
一些鍵盤操作的改進
只有在正常輸入的情況下，才會清除當前文字框的結果id（即qid）
所以，esc和tab鍵不會清除最後一次有效選擇的id

p.s. 有人發郵件跟我說提示框錯位的問題，我自己的乙個專案中也遇到了，原因是最外層的容器設了margin或padding，我在body的第乙個元素寫乙個 居然解決了。。

1.1 支援同一頁面多個元素呼叫本外掛程式

1.2 必需的引數是url

1.3 對於連續不斷地輸入，會把之前的ajax請求全部取消，避免造成伺服器無謂的壓力（圖4）

1.4 最基本呼叫$("myel").autocmpt();

2

3支援關聯查詢，即當前文字框的提示結果可依據頁面另乙個元素的取值

3.1 只支援乙個關聯元素（即父元素），用引數parentid定義，（預設null)

3.2 在開啟了parentid選項的情況下，假如引數定義useparentvalue=false(預設），則外掛程式會取其自定義屬性進行過濾（關聯），否則（true），會取該元素的value屬性關聯

3.2.1 鑑於上述情況，在useparentvalue屬性為假時，該元素必須為呼叫了本外掛程式的元素，

3.2.2 當useparentvalue屬性為真是，該元素必須為表單元素（即必須有value屬性），但不必要是智慧型提示元素

3.2.3 不定義parentid，則此項無意義

3.2.4 定義了parentid的情況下，必須parent元素有值，否則也不會出現提示

4支援快取最後查詢的結果。（頁面多個元素呼叫的情況下，同樣會判斷最後一次觸發提交的元素來確定是否使用快取）

4.1  目前只支援了快取乙個元素的一次結果，有時間的話可考慮擴充套件成每個元素的最後一次查詢結果都快取起來

5預設效果見圖1

，包含：

5.1 每項的文字描述

5.2 每項的拼音簡拼（如果有）

5.3 每項對應的資料庫的主鍵值（如果有），不可見

6多列檢視，解決大量簡訊息的排列（比如人名），（圖2）

6.1 用multi=true開啟

6.2 拼音選項不可見

6.3 主鍵值不可見，但是仍然存在

6.4 只有在取出的記錄數大於32時才可用（4*8，目前這個值不可配，跟css強關聯了，假如你更改了css，主要指提示框的寬度，那麼請自行更改成合適的效果）。

7

8 響應的鍵盤命令有

↑ ←：上一條

↓ →：下一條

esc取消提示

沒有攔截回車事件，會提交表單

9對後台返回的資料格式有要求，見外掛程式內說明，目前實現四個字段：id,文字，拼音，上級id，哪怕沒有值，也要送個空值回來

9.1 就小專案用用，所以沒有做過多擴充套件，否則可以像google一樣，預留相當多的字段，以及用多維陣列返回結果，現在這個做普通提示完全夠用了，歡迎自己擴充套件

1011

svn:

圖一，預設檢視

圖二，多列檢視

圖三，當圖二的情況下繼續輸入或翻頁，結果少於單頁時，自動恢復預設檢視

圖四，演示連續輸入情況下取消之前的ajax請求

jquery冒泡提示外掛程式

本外掛程式是沿用了jtip的素材以及設計思路進行 重寫。拓展了以下功能 1.增加了關閉按鈕或者設定自動關閉間隔時間自動關閉 2.增加了多種呼叫方式，可以任意定位冒泡提示位置 jquery.tips function source,title,content,millisec else jtipid ...

Jquery訊息提示外掛程式toastr

toastr是乙個基於jquery簡單 漂亮的訊息提示外掛程式，使用簡單 方便，可以根據設定的超時時間自動消失。1 使用很簡單，首選引入toastr的js css檔案 script src res toastr toastr.min.js script link rel stylesheet hre...

jquery外掛程式製作 5 提示框外掛程式

今天我們介紹的是提示框外掛程式tooltip的製作，其中還會介紹到自定義選擇器外掛程式的開發。我們首先來介紹自定義選擇器的開發，他的 結構如下 function jquery 呼叫時候的寫法 a customselector 現在我們先解釋下函式中所使用到的各個引數。object 當前dom元素的引...