[AJAX] 自動完成autocomplete－danielhuang030 的研究日誌

春節前在公司卡很久的自動完成，終於解套啦！（吼）

會碰到這個問題，主要是因為本公司的專案管理系統，在材料成本新增時的廠商欄，會計反應會花很多時間在建立重複的資料上；一開始她建議使用下拉式選單...但是可想而知隨著資料量的增加，這下拉式選單也會變的愈來愈龐大...（汗）剛好前一陣子在研究自動完成，就想把這個應用加在專案管理系統中。關於自動完成，英文絕對沒什麼大問題；重點是中文啊～本來是要自己寫，真正動手以後才發現這個功能不是這麼簡單低。後來熊熊發現網路上有好用的免費資源啊！索性就先借用（？）來試試囉～

起初非常驚訝，沒想到網路上的自動完成功能完善，畫面精美；簡單說就是一整個適合！不過是二個javascript跟一個css就把自動完成做的如此完美，用法也非常簡單！不過高興的情緒並沒有持續太久，我很快的發現到這個自動完成，在IE瀏覽器下對中文不支援！（英文OK）非常出乎意料的該網誌作者註明對firefox不支援...但是我的firefox卻OK；很殘念的會計所慣用的瀏覽器是IE6...就這樣自動完成又走進死胡同。

後來我又花了不少時間在網上尋找適合的lib，期間不經意的發現原來一開始我所找到的免費資源其實是CAPXOUS的破解版；這壓根兒不是什麼免費資源！（汗）我所找到的是v1.3.0的版本，目前最新則是到v1.4.4版本。CAPXOUS本身也有提供程式碼下載以及解說～只不過它既然是個共享程式，廣告自然就少不了囉！最新的版本漂亮許多，當然付費授權的價格也就有點不親切...349 USD。

v1.4.4版也只有幾個檔案，當然重點還是在autocomplete.js、prototype.js以及autocomplete.css上囉！有興趣的人可以直接從CAPXOUS的下載位置下載到，程式碼其實還頗複雜本人目前攻力尚淺，是處於一整個看不懂的階段，只好稍微解釋一下連結資料庫時的PHP檔，以及是如何運用在input欄位中的。

主要使用自動完成的頁面，千萬別忘記先導入二個javascript跟一個css：（夾在<head></head>之間）

<script language="JavaScript" src="javascripts/prototype.js" type="text/JavaScript"></script>
<script language="JavaScript" src="javascripts/autocomplete.js" type="text/JavaScript"></script>
<link rel="stylesheet" type="text/css" href="styles/autocomplete.css" />

廠商欄的輸入框：

<input name="supplier" type="text" id="supplier" size="10" />

表格結束後的javascript，導入AJAX：

<script>
var d = new Date();
new Autocomplete("supplier", function() {
return "Suggest.php?msec=" + d.getMilliseconds() + "&type=0&keyword=" + this.value;
});
</script>

d：特別建立的時間值，利用d.getMilliseconds()取得毫秒後，用以防止瀏覽器在以後只讀快取中的資料而沒有重新查詢。
supplier：input時的id（還是name忘記了...）
type&keyword：要傳入Suggest.php用以查詢資料庫

連結資料庫用的Suggest.php：

<?php
// 利用GET取得變數
$keyword = $_GET['keyword'];
$type = $_GET['type'];

// 連線《Project》資料庫
if($keyword != ''){
$query = 'SELECT SUPPLIER ' .
           'FROM wh01_project_supplier ' .
           'WHERE SUPPLIER LIKE "' . $keyword . '%"' .
           'AND TYPE = "' . $type . '"';
}
// keyword無值時
else{
$query = 'SELECT SUPPLIER ' .
           'FROM wh01_project_supplier ' .
           'WHERE SUPPLIER=""';
}
// 執行 SQL query
$result=mysql_query($query,$link);
// 如果$result存在時
if(!empty($result)>0){
while (list($SUPPLIER) = mysql_fetch_row($result)){
    echo "<li onselect=\"this.text.value = '".$SUPPLIER."';\">\n";
    echo $SUPPLIER."\n";
    echo "</li>\n";
}
}
// 結束這個連線
mysql_close();