DEDECMS模板制作之搜索功能制作

那么我们先来看目前dedecms最新版5.6版本中模板中搜索的代码，其中包含了JS和HTML代码

1、JS代码

1. function check(){
2. if(document.formsearch.searchtype.value==“”)
3. document.formsearch.action=“”
4. else
5. document.formsearch.action=“{dede:field/}/search.php”
6. }

2、HTML代码

1. <form  name=“formsearch” action=“” onSubmit=“check();”>
2.   <input type=“hidden” name=“domains” value=“”>
3.     <div class=“form”>
4.       <h4>搜索</h4>
5.   <input type=“hidden” name=“kwtype” value=“0” />
6.   <input name=“q” type=“text” class=“search-keyword” id=“search-keyword” value=“在这里搜索…” onfocus=“if(this.value==’在这里搜索…’){this.value=”;}”  onblur=“if(this.value==”){this.value=’在这里搜索…’;}” />
7.    <select name=“searchtype” class=“search-option” id=“search-option”>
8.    <option value=“” selected=‘1’>google搜索</option>
9.    <option value=“titlekeyword”>站内搜索</option>
10.    </select>
11.    <button type=“submit” class=“search-submit”>搜索</button>
12.    </div>
13.    <input type=“hidden” name=“client” value=“pub-9280232748837488”>
14.    <input type=“hidden” name=“forid” value=“1”>
15.    <input type=“hidden” name=“ie” value=“UTF-8”>
16.    <input type=“hidden” name=“oe” value=“UTF-8”>
17.    <input type=“hidden” name=“safe” value=“active”>
18.    <input type=“hidden” name=“cof” value=”GALT:#008000;GL:1;DIV:#336699;VLC:663399;
19. AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1″>
20.    <input type=“hidden” name=“hl” value=“zh-CN”>
21. </form>

可以从上面的代码中看出，dedecms默认的模板搜索代码js中check()方法来判断表单中的select，而且我们可以看出其中有很多隐藏的HTML标签input，大多都是谷歌搜索广告的代码，如下：

1. <input type=“hidden” name=“client” value=“pub-9280232748837488”>
2.    <input type=“hidden” name=“forid” value=“1”>
3.    <input type=“hidden” name=“ie” value=“UTF-8”>
4.    <input type=“hidden” name=“oe” value=“UTF-8”>
5.    <input type=“hidden” name=“safe” value=“active”>
6.    <input type=“hidden” name=“cof” value=”GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;
7. LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1″>
8.    <input type=“hidden” name=“hl” value=“zh-CN”>

简化代码

通过上面的简单分析，我们可知我们可以直接将其中无用的代码直接删除，将代码进行简化，那么把HTML代码和JS代码结合起来就可以进行超级简单的简化了。最终我们可以得到如下简化的代码：

使用代码

诸如本站首页的搜索代码为

1. <div class=“search”>
2.     <form action=“{dede:field/}/search.php” method=“get” target=“_blank”>
3.       <div class=“search_bg”>
4.         <input type=“text” name=“q” class=“search_input” value=“填入您要搜索的关键词” onfocus=“if(value==’填入您要搜索的关键词’){this.style.color=’#000′;value=”}” onblur=“if(value==”){this.style.color=’#CCC’;value=’填入您要搜索的关键词’}”>
5.       </div>
6.       <div class=“search_submit”>
7.         <input type=“image” src=“{dede:global.cfg_templets_skin/}/images/search.jpg”>
8.       </div>
9.       </form>
10.     </div>

其中使用的就是上面提到的简化代码中的几个代码，而且其中加入了相应的DIV，并且还将button修改为了input，其类型为image。

从上面所简化的代码中可以看出其实要在模板中添加搜索功能的代码，只要懂HTML的朋友都知道该如何进行添加和修改，那么就可以根据此简化的代码进行变化即可，当然对于DIV+CSS方面，也是需要你自己进行调整和使用了。

如果你需要更加强大的搜索功能，诸如本站的搜索页面的搜索功能，那么就得通过JS和HTML同时使用，另外你还得研究透高级搜索模板页面的相应代码。