CODE - 使用 jQuery plugin: Autocomplete

step 1 : 先去 http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ 下載 plugin

step 2 : 撰寫前端程式

先 include 這三隻

jquery.autocomplete.css

jquery-1.8.3.min.js

jquery.autocomplete.min.js

$(function () {
    // sid 的 auto complete
    //var data = ['台北市中正區','台北市大同區','台北市中山區','台北市松山區','台北市大安區'];
    //$('#sid').autocomplete(data, {matchContains: true});
    $('#sid').autocomplete('/_info/owner/ajax?act=auto', {matchContains: true});
});

step 3 : 後端的 php

$sid = $this->getParam('q');
error_log('sid : '.$sid);
$infoModel = & Model_Info::getInstance();
$rows = $infoModel->get($sid, true);
foreach ($rows as $row) {
    echo $row['SID'] . ' ' . $row['NAME'] . "\n";
}

直接 get q 這個參數即可
結果以斷行方式 echo 出來

註 : 一開始是用 jquery-1.9.1, 會造成網頁的 Uncaught TypeError: Cannot read property 'opera' of undefined, 降個版改成 jquery-1.8.3 就沒問題了


ref :
http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions
http://jsgears.com/thread-114-1-1.html
http://blog.darkthread.net/post-2009-07-10-jquery-autocomplete-sample.aspx