基於 jQuery 框架的搜尋建議,類似Google Suggest 或者 AutoComplete
使用方法：
首先是先引用框架和套件的JS內容
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
//利用Google的API引用jQuery的1最新版本的min.js檔案
<link rel="stylesheet" type="text/css" href="../src/jquery.autocomplete.css">
//css 部分的內容可以自行修改成您想要的外觀
<script type="text/javascript" src="../src/jquery.autocomplete.js"></script>
HTML的部分
<fieldset><legend>Debugging Testing</legend>
<p id="hide">HIDE THIS</p>
<p><a href="#" id="flush">Fush the cache</a></p>
<p><a href="#" id="toggle">Toggle hidden block</a></p>
</fieldset>
<h2>Demo</h2>
<form>
<input type="text" id="ac1">
</form>
Javascripts 顯示部分程式碼
//jQuery的文件下載完成執行
$(function() {
$("#ac1").autocomplete('search.php', {
url: 'search.php', //伺服器端的字庫搜尋檔案
minChars: 1, //開始搜尋的最短字詞
useCache: false, //是否使用緩存
filterResults: false //是否過濾結果
});
//這是當第一個連結按下去的時候就把伺服器端的字詞庫下載下來緩存
$("#flush").click(function() {
var ac = $("#ac1").data('autocompleter');
if (ac && $.isFunction(ac.cacheFlush)) {
ac.cacheFlush();
} else {
alert('Error flushing cache');
}
});
//這個只是隱藏那一個顯示區域
$("#toggle").click(function() {
$("#hide").toggle(); // To test repositioning
});
});
最後是重點的PHP部分語法
$data = array(
"Great Bittern" => "Botaurus stellaris",
"Little Grebe" => "Tachybaptus ruficollis",
.
.
.
); //資料以陣列方式儲存
$results = array();
function autocomplete_format($results) { //最後輸出的Function
foreach ($results as $result) {
echo $result[0] . '|' . $result[1] . "\n";
}
}
if (isset($_GET['q'])) { //由JS發送過來的GET接收來查詢$data的資料
$q = strtolower($_GET['q']);
if ($q) {
foreach ($data as $key => $value) {
if (strpos(strtolower($key), $q) !== false) {
$results[] = array($key, $value);
}
}
}
}
$output = 'autocomplete'; //判斷輸出方式,本範例沒有用到這部分,不過檔案中有範例可以參考
if (isset($_GET['output'])) {
$output = strtolower($_GET['output']);
}
if ($output === 'json') { //指定輸出格式 json或文字輸出
echo json_encode($results);
} else {
echo autocomplete_format($results);
}
作者網站：http://code.google.com/p/jquery-autocomplete/
檔案大小：10.2 KB
檔案下載：https://github.com/dyve/jquery-autocomplete
檔案備份：下載
0 意見