因為對寫程式做網頁還很粗淺，很多時候連要用什麼關鍵字來查詢都不確定，先是花了一段時間瞭解我要的功能叫『自動完成』，又花了一段時間搞懂該如何在網站上使用。
這是一個jQuery的套件，jQuery是JavaScript的函式庫。話說我連JavaScript都還看不懂了，一開始時壓根搞不清楚要如何使用這個別人寫好的套件...。買了兩本書來研究，終於還是被我給研究成功了。哈哈。雖然只是會用，內部的東西還是不太清楚，但能用就好了嗎是不。
我是下載這個網站的Autocomplete套件。
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
內含有的功能很多，我僅先選取最基本的部份來做。
要使用的檔案有
1.jquery.js - 在lib資料夾下。這是jQuery的基本檔，要用套件前必須先載入這個檔。
2.jquery.autocomplete.js - 自動完成的套件。包含自動完成的基本功能。
3.jquery.autocomplete.css - 為建議選單的樣式。
先載入以上檔案。
<head>...
<link href="../css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.autocomplete.js" type="text/javascript"></script>
...
</head>
在body內建立表單文字框。
<input type="text" name="ref[author]" id="author" class="author_choice" />
在文字框下加入自動完成的程式碼。
<script type="text/javascript">
$(function(){
$("#author").focus().autocomplete("authorlist.php", {
//author為文字框的id。資料來源為authorlist.php檔
//有許多參數可以設定，以下列出可能會用到的:
minChars:0,
//當輸入多少字元時出現建議選單，若設定為0，則當文字框被點選而尚未有文字輸入時，也會有建議選單出現
width: 200,
//建議選單的寬度
selectFirst: true,
//自動選取建議選單的第一個值
scrollHeight: 300,
//設定建議選單產生捲軸 (scroll: true(預設))時可以設定建議選單的高度
autoFill: true
//自動在文字框欄位中填入建議值
});
});
</script>
在預設狀態中，建議選單一次只會出現10筆，若希望出現多一點，可至 jquery.autocomplete.js 檔案中的第一段修改。
$.fn.extend({
autocomplete: function(urlOrData, options) {
var isUrl = typeof urlOrData == "string";
options = $.extend({}, $.Autocompleter.defaults, {
url: isUrl ? urlOrData : null,
data: isUrl ? null : urlOrData,
delay: isUrl ? $.Autocompleter.defaults.delay : 10,
max: options && !options.scroll ? 10 : 150
}, options);
將10改成想要的數字即可。
前面所說的設定也可以直接在 jquery.autocomplete.js 檔案中更改預設值。
我的資料是用php連結資料庫所產生。
表單會傳送給php的是 $_GET['q']，所以要以 $_GET['q'] 為查詢參數，例如:
<?php
$param=$_GET['q'];
mysql_select_db($database_PlantName, $PlantName);
$query_author = "SELECT distinct total_sp.author FROM total_sp where author like '$param%'";
?>
而最後要將每一個值一一讀出。
<?php
$author = mysql_query($query_author, $PlantName) or die(mysql_error());
$row_author = mysql_fetch_assoc($author);
$totalRows_author = mysql_num_rows($author);
do {
echo $row_author['author']."\n";
} while ($row_author = mysql_fetch_assoc($author));
?>
建議選單的資料載入有兩種方式，一種是像我用的以php連結資料庫的方式，另一個是直接鍵入資料的方式。因為我是用資料庫產生選單的，所以只介紹這一種，另一種方式請參考: http://jsgears.com/thread-114-1-1.html
