Z-blog技巧之搜索自动提示

很有意思的小功能，类似于百度或者Google搜索的时候都会有提示，Z-Blog的搜索也可以做成有提示的，但受限于性能的限制，搜索提示的数据来自于文章的Tag。

一段JS代码，你需要把它保存为common.js并且放到你的主题目录中去，然后在每一个有搜索框的模板上引入这段代码：

//Parse Timeout
function pasIntTimeOut(){
	if (isNaN(intAjaxTimeOut) || intAjaxTimeOut==""){intAjaxTimeOut=6000;}
	if (parseInt(intAjaxTimeOut)<2000){intAjaxTimeOut=2000;}
}

//Search Function
var findHintTimer=0;
function startFindHint(sWords,event){
	var ev = null;
	var n = -1;
	var i = 0;
	if (window.event){ev = window.event;}else{ev = event;}
	var $obj = $("#searchHint>ul>li").each(function(){
		if ($(this).attr("class")=="hint-sel"){
			n = i;
		}
		i++;
	});
	if(ev !=null){
		switch(ev.keyCode){
			case 13: //enter
				if ($("#searchHint>ul>li.hint-sel").size()>0){
					window.location.href=$("#searchHint>ul>li.hint-sel").children("a").attr("href");
					return false;
				}
				break;
			case 38: //up
				$("#searchHint>ul>li").eq(n).removeAttr("class");
				n=n-1;
				if (n<=-1){n=i-1;}
				if (n>=0){$("#searchHint>ul>li").eq(n).attr("class","hint-sel");}
				return false;
				break;
			case 40: //down
				$("#searchHint>ul>li").eq(n).removeAttr("class");
				n++;
				if (n>=i){n=0;}
				if (n<=i){$("#searchhint>ul>li").eq(n).attr("class","hint-sel");}
				return false;
				break;
			default :
				cancleFindHint();
				findHintTimer=setTimeout(function(){findHint(sWords);},400);
				break;
		}
	}

}
function cancleFindHint(){
	clearTimeout(findHintTimer);
	findHintTimer=0;
}
function hideHint(){
	setTimeout(function(){$("#searchHint").hide();},200);
}
function findHint(sWords){
	var $objContent = $("#searchHint");
	if (sWords==""){
		setTimeout(function(){$objContent.hide();},200);
	}else{
		pasIntTimeOut();
		$.ajax({
			type: 'POST', dataType: 'html', timeout: parseInt(intAjaxTimeOut/4), data:"inpWords="+sWords.replace(" ","%20"),
			url: str00+"themes/"+strThemeName+"/plugin/hint.asp",
			success: function(data){
				$objContent.html(data);
				if (data!==""){
					$objContent.show();
				}else{
					$objContent.hide();
				}
			}
		});
	}
}
$(document).ready(function(){
$("input.keyword").attr("autocomplete","off");
//因为有时候这个输入框输入的搜索内容多了，本身会有一个提示功能，所以让这个autocomplete的属性off掉。
});

下面是一段asp代码，你要把它保存为hint.asp并放在主题的plugin目录中：

<%@ language="VBSCRIPT" codepage="65001">
<%
'///////////////////////////////////////////////////////////////////////////////
'// 插件应用:    Z-Blog 1.8 +
'// 插件制作:    HP esloy.com
'// 备    注:    这段代码来自于HP的情侣主题
'// 最后修改：   
'// 最后版本:    
'///////////////////////////////////////////////////////////////////////////////
%>
<% option="" explicit="">
<% on="" error="" resume="" next="">
<% response.charset="UTF-8">
<% response.buffer="True">








<%
Call System_Initialize()

'检查是否启用
If Not LCase(ZC_BLOG_THEME)=LCase("illacrimo2") Then Call ShowError(48) 
//上面这行可以去掉，判断当前主题的。

Dim strReferer
strReferer=CStr(Request.ServerVariables("HTTP_REFERER"))
If Instr(strReferer,ZC_BLOG_HOST)=0 Then 
	ShowError(5)
End If

Dim strWords : strWords=Request.Form("inpWords")
Call CheckParameter(strWords,"sql",-1)
strWords=FilterSQL(strWords)

Dim Tag
Dim objRS
Dim strOutPut

If strWords<>"-1" Then


	Set objRS=objConn.Execute("SELECT TOP 15 [tag_ID] FROM [blog_Tag] WHERE
 [tag_Name] LIKE '%" & strWords & "%' ORDER BY [tag_Count] 
DESC")
	If (Not objRS.bof) And (Not objRS.eof) Then
		strOutPut = strOutPut & ""

		Do While Not objRS.eof


If CheckPluginState("Nobird_Pagebar")=False Then

			strOutPut = strOutPut & "
" & Tags(objRS("tag_ID")).Name & ""& Tags(objRS("tag_ID")).Count  &" 个结果
"

elseif CheckPluginState("Nobird_Pagebar")=True Then

			strOutPut = strOutPut & "
" & Tags(objRS("tag_ID")).Name & ""& Tags(objRS("tag_ID")).Count  &" 个结果
"

End If

			objRS.MoveNext

		Loop

		strOutPut = strOutPut & "
"
	End If
	objRS.Close
	Set objRS=Nothing

End If


Response.Write strOutPut

Call System_Terminate()

If Err.Number<>0 then
  Call ShowError(0)
End If
%>

最后一步，加上触发代码：
       实际上是修改你的搜索框,主要加上的是onblur、onkeyup这两个属性,还有下面的id为searchhint的div。

<div class="Search">
    <form action="https://www.birdol.com/cmd.asp?act=Search" method="post">
        <input value="请在此输入关键字..." onblur="if(this.value==&#39;&#39;){this.value=&#39;请在此输入关键字...&#39;;}hideHint();" onfocus="if(this.value==&#39;请在此输入关键字...&#39;){this.value=&#39;&#39;;}" onkeyup="return startFindHint(this.value,event);" name="edtSearch" class="keyword" type="text"/><br/>
        <div id="buttonsearch">
            <input name="submit" class="search" title="Search" src="https://www.birdol.com/themes/<#ZC_BLOG_THEME#>/style/images/ButtonTransparent.png" alt="Search" type="image"/><br/>
        </div>
    </form>
    <div class="clear">
        .clear
    </div>
    <div id="searchHint"></div>
</div>
<p>

连续几篇都是在剥离高手的主题插件，实际上Z-Blog自身有很多优秀的主题插件，只不过作者都比较喜欢说自己的主题好，从来不说主题插件好...

转载请注明：鸟儿博客 » Z-blog技巧之搜索自动提示