ajax Suggest類似google的搜索提示效果
更新時(shí)間:2009年03月11日 23:48:11 作者:
實(shí)現(xiàn)了類似google的搜索提示效果。
實(shí)現(xiàn):
<script type="text/javascript" src="/path/to/SuggestFramework.js"></script>
<script type="text/javascript">window.onload = initializeSuggestFramework;</script>
有了上面兩句后,每個(gè)取了名的文本框會(huì)多出五個(gè)屬性:
1.action 必須。接受 GET 方式提交的數(shù)據(jù),并返回相關(guān) Javascript 數(shù)組的動(dòng)態(tài)頁。
2.capture 如果返回的結(jié)果不止一列(比如本例中的單詞和中文意思),將要替換用戶輸入的那一列(從 1 開始算)。通常這個(gè)和數(shù)據(jù)庫字段相對(duì)應(yīng)。
可選,默認(rèn)為 1.
3.columns 下拉顯示的列數(shù),比如本例中,按字母查詢單詞,并將中文意思顯示在右側(cè)。可選,默認(rèn)為 1.
4.delay 查詢延時(shí),單位為毫秒。較低的延時(shí)會(huì)得到更快的反應(yīng),但會(huì)加重服務(wù)器負(fù)擔(dān)??蛇x,默認(rèn)為 1000(1秒)。
5.heading 如果設(shè)為 true ,第一個(gè)數(shù)組值將作為不可選擇項(xiàng)(標(biāo)題欄)。當(dāng)有兩列或兩列以上數(shù)據(jù)時(shí)非常有用??蛇x,默認(rèn)為 false.
數(shù)據(jù)提交只需要兩個(gè)數(shù)據(jù)
1.type 輸入框的name
2.q 搜索關(guān)鍵字(默認(rèn)UTF-8編碼)
您下載的壓縮包中,已經(jīng)包含php和ColdFusion示例,當(dāng)然這個(gè)框架可以適用于所有的編程語言,無平臺(tái)限制。后臺(tái)數(shù)據(jù)輸出就是一條 Javascript 語句。一維數(shù)組這么寫:
new Array(”val1″, “val2″, “val3″);
二維數(shù)組這么寫:
new Array(
new Array(”第1行條第1列”, “第1行第2列”),
new Array(”第2行條第1列”, “第1行條第2列”),
new Array(”第3行條第1列”, “第1行條第2列”)
);
最后介紹一下,css中需要定義的4個(gè)類
.SuggestFramework_List 提示內(nèi)容所在區(qū)域
.SuggestFramework_Heading 第一條提示
.SuggestFramework_Highlighted 設(shè)置高亮的一條提示
.SuggestFramework_Normal 其他提示
下載地址 http://xiazai.jb51.net/200903/yuanma/SuggestFramework-0.31.zip
<script type="text/javascript" src="/path/to/SuggestFramework.js"></script>
<script type="text/javascript">window.onload = initializeSuggestFramework;</script>
有了上面兩句后,每個(gè)取了名的文本框會(huì)多出五個(gè)屬性:
1.action 必須。接受 GET 方式提交的數(shù)據(jù),并返回相關(guān) Javascript 數(shù)組的動(dòng)態(tài)頁。
2.capture 如果返回的結(jié)果不止一列(比如本例中的單詞和中文意思),將要替換用戶輸入的那一列(從 1 開始算)。通常這個(gè)和數(shù)據(jù)庫字段相對(duì)應(yīng)。
可選,默認(rèn)為 1.
3.columns 下拉顯示的列數(shù),比如本例中,按字母查詢單詞,并將中文意思顯示在右側(cè)。可選,默認(rèn)為 1.
4.delay 查詢延時(shí),單位為毫秒。較低的延時(shí)會(huì)得到更快的反應(yīng),但會(huì)加重服務(wù)器負(fù)擔(dān)??蛇x,默認(rèn)為 1000(1秒)。
5.heading 如果設(shè)為 true ,第一個(gè)數(shù)組值將作為不可選擇項(xiàng)(標(biāo)題欄)。當(dāng)有兩列或兩列以上數(shù)據(jù)時(shí)非常有用??蛇x,默認(rèn)為 false.
數(shù)據(jù)提交只需要兩個(gè)數(shù)據(jù)
1.type 輸入框的name
2.q 搜索關(guān)鍵字(默認(rèn)UTF-8編碼)
您下載的壓縮包中,已經(jīng)包含php和ColdFusion示例,當(dāng)然這個(gè)框架可以適用于所有的編程語言,無平臺(tái)限制。后臺(tái)數(shù)據(jù)輸出就是一條 Javascript 語句。一維數(shù)組這么寫:
new Array(”val1″, “val2″, “val3″);
二維數(shù)組這么寫:
new Array(
new Array(”第1行條第1列”, “第1行第2列”),
new Array(”第2行條第1列”, “第1行條第2列”),
new Array(”第3行條第1列”, “第1行條第2列”)
);
最后介紹一下,css中需要定義的4個(gè)類
.SuggestFramework_List 提示內(nèi)容所在區(qū)域
.SuggestFramework_Heading 第一條提示
.SuggestFramework_Highlighted 設(shè)置高亮的一條提示
.SuggestFramework_Normal 其他提示
下載地址 http://xiazai.jb51.net/200903/yuanma/SuggestFramework-0.31.zip
您可能感興趣的文章:
- 使用Ajax模仿百度搜索框的自動(dòng)提示功能實(shí)例
- Servlet+Ajax實(shí)現(xiàn)智能搜索框智能提示功能
- Ajax實(shí)現(xiàn)智能提示搜索功能
- ASP.NET搭配Ajax實(shí)現(xiàn)搜索提示功能
- 利用AjaxControlToolkit實(shí)現(xiàn)百度搜索時(shí)的下拉列表提示詳細(xì)步驟
- php+ajax做仿百度搜索下拉自動(dòng)提示框(有實(shí)例)
- asp+ajax仿google搜索提示效果代碼
- asp.net+js實(shí)現(xiàn)的ajax sugguest搜索提示效果
- Ajax實(shí)現(xiàn)搜索框提示功能
相關(guān)文章
AJax 學(xué)習(xí)筆記二(onreadystatechange的作用)
初次接觸onreadystatechange這個(gè)事件句柄不知道有何用處,看過一篇文章的介紹之后,終有大致所了解。2010-04-04
使用對(duì)象封裝ajax重復(fù)調(diào)用的方法
在項(xiàng)目中經(jīng)常用到AJAX調(diào)用遠(yuǎn)程數(shù)據(jù),每一次調(diào)用,都得寫一個(gè)ajax方法,這就造成了重復(fù)代碼過多,可讀性也不夠強(qiáng),所以,我一般都是封裝起來,需要的時(shí)候調(diào)用2016-01-01
ajaxFileupload實(shí)現(xiàn)多文件上傳功能
這篇文章主要為大家詳細(xì)介紹了ajaxFileupload實(shí)現(xiàn)多文件上傳功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11
ajax回調(diào)函數(shù)中使用$(this)取不到對(duì)象的解決方法
如果在ajax的回調(diào)函數(shù)內(nèi)使用$(this)的話,實(shí)踐證明,是取不到任何對(duì)象的,需要的朋友可以參考下2014-06-06
ajax 自動(dòng)完成下拉框 自動(dòng)提示位置問題
ajax 自動(dòng)完成下拉框 自動(dòng)提示位置問題...2007-02-02
Ajax返回?cái)?shù)據(jù)之前的loading等待效果
我們通過ajax請(qǐng)求,向后臺(tái)傳遞參數(shù),然后后臺(tái)經(jīng)過一系列的運(yùn)算之后向前臺(tái)返還數(shù)據(jù),我希望在等待數(shù)據(jù)成功返還之前可以展示一個(gè)loading.gif圖。接下來通過本文給大家分享Ajax返回?cái)?shù)據(jù)之前的loading等待效果,需要的朋友可以參考下2017-08-08

