什么叫搜索提示？你用过google搜索引擎吗？用过肯定见到过下面这个效果：
复制内容到剪贴板
代码:
<script type="text/javascript" src="js/search.js"></script>
一个名为 KeyWords 的输入框
<div class="absolute" style="top:10px;left:125px">
<input autocomplete="off" id="KeyWord" onblur="showSearch(this,1)" onfocus="showSearch(this)" name="KeyWords" value="" class="findInto" onkeyup="if(event.keyCode!=13&event.keyCode!=38&&event.keyCode!=40&&document.getElementById('keywordtype').value=='goods'&&this.value!='') showResult(event.keyCode,this.value);else if(this.value=='') hideResult()" onkeydown="showKeyDown(event.keyCode)" value="{$search_keywords|escape}" />
</div>
放置输出结果
<div id="result" style="display:none"></div>
<script type="text/javascript" id="SearchJs"></script>search.js 代码
复制内容到剪贴板
代码:
function showSearch(obj,type){
if(type){
if(obj.value=="")
obj.value="";
obj.style.color='gray';
}else{
if(obj.value==show_word||obj.value=="输入关键字进行搜索")
obj.value="";
obj.style.color='#000000';
}
}
function showFind(sortId){
var obj=document.getElementById("sClassid");
var length;
length = obj.length;
for(var index=0;index<length;index++){
if(obj.options[index].value == sortId){
obj.selectedIndex = index;
break;
}
}
}
document.onclick=hideResult;
var nowLink=-1;
var preLink=0;
var keyNumber=0;
function showResult(code,value){
var obj=document.getElementById('result');
ShowSearchResult(value);
nowLink=-1;
preLink=0;
}
function hideResult(){
var obj=document.getElementById('result');
if(obj) obj.style.display='none';
}
function showKeyDown(code){
keyNumber=document.getElementById("result").childNodes.length;
if(code==38||code==40){
preLink=nowLink;
if(code==38)
nowLink--;
else if(code==40)
nowLink++;
if(nowLink<0) nowLink=keyNumber-1;
else if(nowLink>keyNumber-1) nowLink=0;
var objNowLink=document.getElementById("result").childNodes[nowLink];
if(objNowLink)
objNowLink.className="activeLink";
if(nowLink!=-1){
var objPreLink=document.getElementById("result").childNodes[preLink];
if(objPreLink)
objPreLink.className="";
}
} else if(code==13){
if(nowLink!=-1){
var objNowLink=document.getElementById("result").childNodes[nowLink];
if(objNowLink){//NO.1以下这段是获取搜索提示的关键字
keyHref=objNowLink.href;
keyStart=keyHref.indexOf("KeyWord=");
keyEnd=keyHref.indexOf("&ADTAG");
keyValue=keyHref.substring(keyStart+8,keyEnd);
document.getElementById("KeyWord").value=keyValue;
}
}
if(document.getElementById("searchForm"))
searchSubmitTo();//由No.1产生的结果后自动提交
}
}
function loadscript(rURL,rID) {
var oldscript = document.getElementById(rID);
var newscript = document.createElement("script");
newscript.setAttribute("id", rID)
newscript.setAttribute("src", rURL);
oldscript.parentNode.replaceChild(newscript, oldscript);
return true;
}
function ShowSearchResult(KeyWord){
//这句是产生关键字代码 http://wwww.xxx.com/isuggest.php?KeyWord= 这是一个搜索关键的页面
//自己看着我提供的 isuggest.php 写代码喽！
loadscript("http://wwww.xxx.com/isuggest.php?KeyWord="+KeyWord,"SearchJs");
return true;
}isuggest.php生成的内容
按下面格式要求生成代码就可以
复制内容到剪贴板
代码:
<?php
echo "document.getElementById('result').innerHTML = \"<a href='链接1'><div class='resultName'>关键字1</div><div class='resultCount'>约 0001 个结果</div></a><a href='链接2'><div class='resultName'>关键字2</div><div class='resultCount'>约 0002 结果</div></a><a href='链接3'><div class='resultName'>关键字3</div><div class='resultCount'>约 0003 结果</div></a>\";";
echo "\ndocument.getElementById(\"result\").style.display='';";
?>style.css样式相关
复制内容到剪贴板
代码:
/* 搜索提示 */
#result{width:244px;overflow:hidden;border:1px solid #808080;color:gray;position:absolute;left:250px;top:-38px;background:#fff}
#result a{border-bottom:1px dotted #BADDFD;display:block;text-decoration:none;height:20px;position:relative;cursor:hand;color:#333}
#result a:hover,#result a.activeLink{text-decoration:none;background:#E5F5FF;color:#FF4E00}
#result .resultName{position:absolute;left:10px;width:120px;top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
#result .resultCount{position:absolute;right:10px;width:100px;top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}说明：这个不是我原创。我是从网站上移植过来的代码。不当之处敬请原谅！！！
