See this "Apply Ajax to create a search engine front-end interface", the original text you can read, the following is an example, this mode of MSN and Google provide similar mode of interface, than I provide the code to be more gorgeous, but are based on no refresh, I think it is suitable for the search station, Convenient and do not care about SEO, can get a better experience.
<!--
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 ">
<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 isn't 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>
<body>
<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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
