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)頁(yè)。
2.capture 如果返回的結(jié)果不止一列(比如本例中的單詞和中文意思),將要替換用戶輸入的那一列(從 1 開始算)。通常這個(gè)和數(shù)據(jù)庫(kù)字段相對(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)。可選,默認(rèn)為 1000(1秒)。
5.heading 如果設(shè)為 true ,第一個(gè)數(shù)組值將作為不可選擇項(xiàng)(標(biāo)題欄)。當(dāng)有兩列或兩列以上數(shù)據(jù)時(shí)非常有用。可選,默認(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è)框架可以適用于所有的編程語(yǔ)言,無(wú)平臺(tái)限制。后臺(tái)數(shù)據(jù)輸出就是一條 Javascript 語(yǔ)句。一維數(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)頁(yè)。
2.capture 如果返回的結(jié)果不止一列(比如本例中的單詞和中文意思),將要替換用戶輸入的那一列(從 1 開始算)。通常這個(gè)和數(shù)據(jù)庫(kù)字段相對(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)。可選,默認(rèn)為 1000(1秒)。
5.heading 如果設(shè)為 true ,第一個(gè)數(shù)組值將作為不可選擇項(xiàng)(標(biāo)題欄)。當(dāng)有兩列或兩列以上數(shù)據(jù)時(shí)非常有用。可選,默認(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è)框架可以適用于所有的編程語(yǔ)言,無(wú)平臺(tái)限制。后臺(tái)數(shù)據(jù)輸出就是一條 Javascript 語(yǔ)句。一維數(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)文章
php+ajax實(shí)現(xiàn)帶進(jìn)度條的大數(shù)據(jù)排隊(duì)導(dǎo)出思路以及源碼
最近在做一個(gè)項(xiàng)目,我們現(xiàn)在有很多數(shù)據(jù),分表存放,項(xiàng)目要求在導(dǎo)出的時(shí)候需要有進(jìn)度條。經(jīng)過一番思索,完成了一下內(nèi)容,分享給大家。最后面有完整代碼。2014-05-05配合AJAX天氣預(yù)報(bào)的webService 之a(chǎn)sp
配合AJAX天氣預(yù)報(bào)的webService 之a(chǎn)sp...2007-01-01AJAX入門之深入理解JavaScript中的函數(shù)
AJAX入門之深入理解JavaScript中的函數(shù)...2006-06-06使用加載圖片解決在Ajax數(shù)據(jù)加載中頁(yè)面出現(xiàn)短暫空白的問題(推薦)
在項(xiàng)目中用ajax異步獲取數(shù)據(jù)后有時(shí)會(huì)因?yàn)閿?shù)據(jù)問題或者網(wǎng)絡(luò)問題,頁(yè)面一直顯示空白,現(xiàn)在用加載圖片來過渡這種狀態(tài),具體實(shí)例代碼通過本文一起學(xué)習(xí)吧2016-12-12jquery ajax 向后臺(tái)傳遞數(shù)組參數(shù)示例
在JS中向后臺(tái)傳遞數(shù)組參數(shù),如果數(shù)組中放的是對(duì)象類型,傳遞到后臺(tái)是顯示的只能是對(duì)象字符串--[object Object],具體的原因及解決方法如下,有類似問題的朋友可以參考下2013-07-07ajax數(shù)據(jù)返回進(jìn)行遍歷的實(shí)例講解
今天小編就為大家分享一篇ajax數(shù)據(jù)返回進(jìn)行遍歷的實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08Ajax請(qǐng)求響應(yīng)中用window.open打開新窗口被攔截的解決方法
ajax 異步請(qǐng)求成功后需要新開窗口打開 url,使用的是 window.open() 方法,但是會(huì)被瀏覽器給攔截,怎么解決呢,下面小編給大家解答下2016-08-08