看到這篇《應用AJax創建搜索引擎前端界面》，原文大家可以讀一讀，下面是例子，這種模式MSN和GOOGLE都提供類似模式的界面了，比我提供的代碼要絢麗的多，可是都是基於無刷新的，我覺得很適合小站裡的搜索，便捷而且不用在乎SEO，能得到較好的體驗。
<!--
The Code From:http://www.devarticles.com/c/a/JavaScript/Creating-the-Front-End-of-a-Search-Engine-with-AJax/4/
Title:Creating the Front End of a Search Engine with AJax
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHtml 1.0 Strict//EN""http://
www.w3.org/TR/xhtml1/DTD/xHtml1-strict.dtd">
<html XMLns="http://www.w3.org/1999/xHtml">
<head>
<meta http-equiv="Content-Type" content="text/Html;
charset=iso-8859-1" />
<title>AJax-BASED SEARCH ENGINE</title>
<script language="Javascript">
<!--
// send http requests
function sendHttpRequest(url,callbackFunc,respXML){
var XMLobj=null;
try{
xmlobj=new XMLHttpRequest();
}
catch(e){
try{
xmlobj=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
alert('AJax is not supported by your browser!');
return false;
}
}
XMLobj.onreadystatechange=function(){
if(XMLobj.readyState==4){
if(XMLobj.status==200){
respXml?eval(callbackFunc+'(xmlobj.responseXML)'):eval(callbackFunc+'(XMLobj.responseText)');
}
}
}
// open socket connection
XMLobj.open('GET',url,true);
// send http header
XMLobj.setRequestHeader('Content-Type','text/Html;charset=UTF-8');
// send http request
XMLobj.send(null);
}
// display search results
function displayResults(results){
var rescontainer=document.getElementById('resultcontainer');
if(!rescontainer){return};
rescontainer.innerHtml='';
rescontainer.innerHtml=results;
}
window.onload=function(){
if(document.getElementById&&document.getElementsByTagName&&document.createElement){
var searchbutton=document.getElementsByTagName('form')[0].elements[1];
if(searchbutton){
searchbutton.onclick=function(){
sendHttpRequest('http://www.google.cn/search?hl=zh-CN&q='+document. getElementsByTagName('form')[0].elements[0].value,'displayResults');
}
}
}
}
-->
</script>
<style type="text/CSS">
<!--
body{
margin:0;
padding:0;
background:#fff;
text-align:center;
}
body div {text-align:left;}
h1{
font:bold 28px Arial, Helvetica, sans-serif;
color:#000;
text-align:center;
}
h2{
font:bold 12px Arial, Helvetica, sans-serif;
color:#c00;
}
p{
font:normal 12px Arial, Helvetica, sans-serif;
color:#000;
}
#searchcontainer{
width:600px;
padding:10px 0 10px 0;
margin-left:auto;
margin-right:auto;
background:#eee;
border:1px solid #ccc;
text-align:center;
}
#resultcontainer{
width:600px;
height:500px;
padding:10px;
margin-left:auto;
margin-right:auto;
overflow:auto;
background:#fafafa;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
}
#resultcontainer ul,li{
display:block;
list-style:none;
}
#resultcontainer a,#resultcontainer a:visited{
font:bold 12px Arial, Helvetica, sans-serif;
text-decoration:underline;
color:#039;
}
#resultcontainer a:hover,#resultcontainer
a:active,#resultcontainer a:focus{
color: #c00;
}
.searchbox{
width:200px;
font:normal 12px Arial, Helvetica, sans-serif;
color:#000;
}
.searchbutton{
width:80px;
font:bold 12px Arial, Helvetica, sans-serif;
color:#000;
}
-->
</style>
</head>
<body>
<h1>AJax-BASED SEARCH ENGINE</h1>
<div id="searchcontainer">
<form method="get">
<input type="text" name="searchterm" title="Enter your search term here" class="searchbox" />
<input type="button" name="search" value="Search" class="searchbutton" title="Search Now!" />
</form>
</div>
<div id="resultcontainer">
</div>
</body>
</Html>