實際執行畫面

類似 Facebook 搜尋的樣式的提示搜尋，使用 jQuery 框架 AJAX 非同步搜尋資料，高速的使用者端緩存方式。

使用方法：
首先載入程式所需要的 JavaScript 程式碼
//使用Google ajax API 直接連結 jQuery 1.7.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
//主程式碼
<script type="text/javascript" src="lib/autosuggest/bsn.AutoSuggest_2.1.3.js"></script>
//主程式方塊的CSS設計
<link rel="stylesheet" href="lib/autosuggest/autosuggest_inquisitor.css" type="text/css" media="screen" charset="utf-8">


//本範例的CSS設計
.search_example {
margin:0px 20px 0px 10px;
}
.search_bar {
position:relative;
color:#000000;
font-weight:bold;
margin:8px 0px;
padding:0px 5px;
height:20px;
}
.search_bar form {
display:inline;
}
.search_bar input {
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
}
.search_bar ul {
line-height:19px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:3px 0pt 0pt;
padding:0pt;
z-index:10000000;
}
.search_bar li {
color:#333333;
float:left;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
margin-left:5px;
margin-right:0px;
width:auto;
}
.search_bar  input.search_txt {
background:white url(img/searchglass.png) no-repeat scroll 3px 4px;
border:1px solid #95A5C6;
color:#000000;
font-weight:normal;
padding:2px 0px 2px 17px;
}
.search_bar input.searchBtnOK {
background:white none repeat scroll 0%;
border:1px solid #95A5C6;
color:#000000;
font-weight:bold;
padding:1px;
}
.search_response {
position:relative;
border:2px solid #f8e89d;
padding:10px;
padding-left:50px;
margin:0px;
background:#ffffff url(img/kghostview.png) no-repeat 0px 10px;
}
#comment_list {
padding-bottom: 20px;
margin: 0px 10px 0px 10px;
}
#comment_list h2 { margin: 50px 0 0; }
#comment_list form input { margin-bottom: 4px; }
#comment_list form textarea { width: 80%; padding: 7px 5px; margin-top:6px; }
#comment_list form a {
color: #555;
text-decoration: none;
border-bottom: 1px dotted #fff;
}
#comment_list form a:hover { color: #fff; }
#comment_list ul {
padding: 0;
margin: 0;
}
#comment_list li {
position: relative;
display: block;
padding: 10px 3px;
margin: 10px 2px;
background: #fefefe;
font-family: Verdana;
font-size: 13px;
border: 1px solid #ccc;
-webkit-box-shadow: 0px 0px 5px #000;
-moz-box-shadow: 0px 0px 5px #000;
box-shadow: 0px 0px 5px #000;
}
#comment_list li img.avatar {
float: left;
padding: 2px;
background: #ccc;
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
margin: 3px 15px 3px 10px;
width: 60px;
height: 50px;
}
#comment_list li cite,
#comment_list li cite a {
font-weight: bold;
color: #555;
text-decoration: none;
font-size: 14px;
}
#comment_list li p {
font-size: 13px;
line-height: 17px;
padding: 7px 10px;
}
#comment_list li p a {
color: #bf697f;
text-decoration: none;
border-bottom: 1px dotted #A839B2;
}
#comment_list li p a:visited { color: #9e3c80; }
#comment_list li p a:hover { color: #A839B2; }
#comment_list li p.date {
position: absolute;
top: 0px;
right: 10px;
text-transform: capitalize;
font-size: 10px;
padding: 2px 5px 0;
}
#comment_list li p.edit {
position: absolute;
bottom: 3px;
right: 10px;
}
#comment_list li code, #comment_list li pre {
position: relative;
display: block;
color: #262626;
padding:  0 15px;
}
.pink { background-color:#d91e4e; color:#FFFFFF; border-color:#d91e4e; }


HTML部分的設計
<div class="search_example">
<h3>Search only in countries list, by selecting "country" plugin</h3>
<div class="search_bar">
<form method="post" action="/search_engine/" class="home_searchEngine" id="form_search_country">
<input type="hidden" id="search_country_value" name="search_value">
<ul>
<li><input type="text" size="24" name="search_txt" id="input_search_country" class="search_txt"></li>
<li><input type="submit" class="searchBtnOK" value="Ok"></li>
</ul>
</form>
</div>
<div style="clear:both;margin:0px 10px;height:5px;"></div>
<div style="margin-top:0px;">
<div class="search_response" style="display:none;" id="input_search_country_response"></div>
</div>
</div>


最後JavaScript的部分
$(function(){
var options = {
script:"AjaxSearch/_doAjaxSearch.action.php?&json=true&plugin=country&limit=8&",
varname:"input",
json:true,//返回值是否為JSON
shownoresults:true,//是否顯示返回值
noresults:"No Results",//搜尋不到資料時顯示
maxresults:8,//搜尋的最大顯示數量
cache:false, //是否啟用暫存
minchars:2,  //最小的搜尋字數
timeout:100000,//自動隱藏時間以毫秒為單位
callback: function (obj) { //選擇符合選項之後
//建立HTML顯示片段
var html = "ID : " + obj.id + "<br>Main Text : " + obj.value + "<br>Info : " + obj.info;
$('#input_search_country_response').html(html).show() ;
}
};
//初始化自動搜尋功能
var as_json = new bsn.AutoSuggest('input_search_country', options);
});


加上PHP的搜尋資料的部分
$input = $_GET['input'];
$limit = $_GET['limit'];
$plugin = $_GET['plugin']; //接收值

if (isset($_REQUEST['json']))
{
header("Content-Type: application/json");

echo "{\"results\": [";
$arr = array();
for ($i=0;$i<count($aResults);$i++)
{
$arr[] = "{\"id\": \"".$aResults[$i]['id']."\", \"value\": \"".$aResults[$i]['value']."\", \"info\": \"".$aResults[$i]['info']."\"}";
}
echo implode(", ", $arr);
echo "]}";
}

作者網站：http://www.web2ajax.fr/examples/facebook_searchengine/
檔案大小：168 KB(下載內容為wordpress套件)
檔案下載：http://www.web2ajax.fr/examples/facebook_searchengine/facebook_searchengine.zip
檔案備份：下載