[jQuery] 簡單做出像google搜尋一樣的自動完成效果 (jQuery UI Autocomplete)

1.引入jquery的程式

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

2.js主程式

<script>
  $(function() {
    $('#auto').autocomplete({
      source: "ajax.php",
      minLength: 3
    });
  });
</script>

3.html碼
<input type="text" id="auto" />

說明：
1.預設的變數名稱是"term"，所以接收頁要用$_GET["term"]來接值。
2.ajax.php輸出的格式"必須"是json。
範例如下：

$sql = "select * from table where name like '".$_GET['term']."%'";
$query=$db->query($sql);
while($result=$db->fetch_array($query)){
$rows[] = $result['name'];
}
echo json_encode($rows);

註：minLength: 3 代表至少要輸入三碼才啟動自動完成，如果Server主機效能很好，可以改成1。其他參數的中文說明可參考 這裡