Home » jQuery 外掛

[jQ]jSuggest 1.0

[ 日期： | 瀏覽：6,090 | 迴響：10 ]
範例 1
請協助我把這個效果加到我的網站 (只要 1,200 元)
沒錯!只要 1,200 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

jSuggest 1.0

在 Google 等搜尋引擎查詢時，可能只要輸入一兩個關鍵字時，就會自動再帶出更詳細的關鍵字，這效果通稱是 AutoComplete。jSuggest 也提供了類似的效果。

套件名稱：jSuggest
套件版本：1.0
作者網站：http://www.gimiti.com/kltan/wordpress/
套件網址：http://plugins.jquery.com/project/jSuggest
發佈日期：2008-05-26
檔案大小：4.39 KB
檔案下載：jquery.jSuggest.1.0.js suggestion.php

參數說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

minchar(選填)
描述： 最少要輸入多少字元才會觸發動作
預設值： 3
 
opacity(選填)
描述： suggestions 文字的透明度
預設值： 1.0
 
zindex(選填)
描述： suggestions z-Index
預設值： 20000
 
delay(選填)
描述： 延遲觸發 suggestions 的毫秒數
預設值： 2500
 
loadingImg(選填)
描述： 載入時的動畫圖片(請加上相對或絕對路徑)
預設值： 'ajax-loader.gif'
 
loadingText(選填)
描述： 載入時的訊息
預設值： 'Loading...'
 
autoChange(選填)
描述： 是否自動選取滑鼠所移到的 suggestions 中的文字
預設值： false
 
url(選填)
描述： suggestions 資料的來源
預設值： ""
 
type(選填)
描述： 值為 "GET" 或 "POST"
預設值： "GET"
 
data(選填)
描述： 可在連結至 url 時加上 queryString用，假設 data 指定值為 age 且 url 為 abgne.php 時，因此在連結時會轉換成 abgne.php?age=已輸入的欄位資料
預設值： ""

方法說明：

檢視原始碼 JavaScript
1
2

// 幫指定元素加上 jSuggest 功能
$(selector).jSuggest([settings]);

使用範例：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jSuggest.1.0.js"></script>
<style type="text/css">
	#jSuggestContainer {
		position:absolute;
		font: 12px Tahoma;
		border:1px solid #ffb931;
		border-top:0;
		background:#FFF;
	}
	.jSuggestLoading {
		font-style:italic;
		padding: 10px;
	}
	#jSuggestContainer ul, #jSuggestContainer ul li{
		margin: 0;
		padding:0;
		list-style:none;
	}
	#jSuggestContainer ul li{
		padding: 2px 4px;
		border-bottom: 1px dotted #ffe594;
		color:#666;
		background:#fff9e7;
		cursor:pointer
	}
	#jSuggestContainer ul li.last{
		border-bottom: 0;
	}
	#jSuggestContainer ul li.jSuggestHover{
		background:#ffeaaa;
		color:#333;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 幫 #searchQuery 加上 suggest 的效果
		// 並設定 minchar、loadingImg、loadingText、autoChange、url、type 及 data 屬性
		$("#searchQuery").jSuggest({
			minchar: 2,
			loadingImg: "images/ajax-loader.gif",
			loadingText: "我猜你要輸入的是...",
			autoChange: true,
			url: "suggestion.php",
			type: "GET",
			data: "searchQuery"
		});
	});
</script>
 
<body>
	<h5>請最少輸入 2 個字元</h5>
	<input type="text" name="searchQuery" id="searchQuery" />
</body>

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

附註：
使用時，所返回的資料格式須為 UL > LI，且最後一個 LI 要賦予其 className 值為 last 才行。

Loading 圖片：
ajax-loader

10 筆針對 [jQ]jSuggest 1.0 的迴響

  1. 請問一下最後面那個suggestion.php可以提供一下範例語法嗎
    另外如果我想限制英文輸入或中文輸入或數字與符號輸入要如何修改呢

  2. 另外再問一個問題
    像目前yahoo奇摩首頁的搜尋智能提示會有很多連結的網頁與區塊
    要怎麼做出那樣的效果~~

  5. 恩!
    男大提出了好的想法
    一個健全的模組
    確是應該可以做各種參數微調及設定
    所以是否接受各種語言也是考量之一
    所以男大給的那個參考模組是否可以去控制各種語言的限制呢
    另外
    suggestion.php既然是用php寫的
    是否可以將所有搜尋的清單直接去撈mysql的資料表呢?
    我看過國外有另一個模組名稱叫做AutoCompleter寫的語法內容和你的不太一樣，但他有提供sql的範例與php我也提供出來做分享，看看男大這是否也可以將suggestion.php另外在寫成可以撈資料庫的php範例如下;
    http://www.nodstrum.com/2007/09/19/autocompleter/

    • 唔.這外掛並不是我寫的, 而該作者也是就它的需求寫出並分享該外掛。
      至於你說能不能從 mysql 撈資料的問題..這是肯定可以的, 就看您的 php 中要怎樣寫。

      ajax 很簡單, 麻煩的是要怎樣呈現您取得的資料。

發表迴響