看到有人说科讯的搜索不好看，也看到有人说搜索的样式不好控制，今天乘空来给大家写个分享教程，希望能给大家一些帮助，小弟不才，有什么说得不好的地方还请指出，大家一起切磋分享。

现在我就以文章模型搜索为例，大家看看用SQL标签是怎么来打造不一样的搜索的。

文章搜索是自动生成在JS文件下的S_Article.js文件。

打开这个文件，大家看看源代码，就会发现其实就是一个用JS写出来的搜索表单。

现在我们把它转成HTML代码，那么表单就变成

<form id="SearchForm" name="SearchForm" method="get" action="/plus/Search.asp">

<select name="SearchType">
<option value="1">标 题</option>
<option value="2">内 容</option>
<option value="3">作 者</option>
<option value="4">录入者</option>
<option value="5">关键字</option>
</select>

<select name="ClassID" style="width:150">
<option value="0" selected="selected">所有栏目</option>
<option value='20088106776907'>新闻动态 </option><option value=\'20082039846991\'>　├ 国外新闻</option><option value='20080440748080'>└ 国内新闻</option>

</select>

<input name="KeyWord" type="text" class="textbox"  value="关键字" onfocus="this.select();"/>

<input name="ChannelID" value="1" type="hidden" />
<input type="submit" class="inputButton" name="Submit" value="搜 索" />

</form>

这样一来，这个搜索表单就一目了然了。把它抠出来，放在你的模板里。现在我们来改样式。

蓝色的这段。你可以自由发挥了。比如<option value="1">标 题</option>你可以把里面的文字改成文章标题。

你也可以把<option value="4">录入者</option>这行去掉。看你的喜欢。如果你还想加些其它自定义字段的搜索，那你就要到plus/search.asp里面做做文章了。这个就是题外话了。

重点的来了。看到红色背景的那段。我们用SQL语句循环嵌套来解决它。

（1）标签名：文章搜索内循环

查询语句：select ClassID,ID,FolderName,FolderOrder,TJ,TN from KS_Class where TJ=2 and TN="{$Param(0)}" order by FolderOrder asc

循环体：

[loop=50]
<option value="{$Field(ID,GetInfoUrl,100,2)}" class="suboption">{$Field(FolderName,Text,0,...,0,)}</option>
[/loop]

（2）标签名：文章搜索外输出

查询语句：select ClassID,ID,FolderName,ChannelID,FolderOrder,TJ from KS_Class where ChannelID=1 and TJ=1 order by FolderOrder asc

循环体：

[loop=50]
<option value="{$Field(ID,GetInfoUrl,100,2)}" class="mainoption" disabled="disabled">{$Field(FolderName,Text,0,...,0,)}</option>
{SQL_文章搜索内循环({$Field(ID,GetInfoUrl,100,2)})}
[/loop]

OK，于是上面的表单红色背景那段就可以用SQL标签{SQL_文章搜索外输出()}来代替了。

定义一下.mainoption{background:#ccc;}就可以看到一级栏目的背景变灰了。还有其它效果可以自己改。

如果您想要它不能被选中，可以参考以下这段JQuery代码：(前提是你的网站里要有JQuery文件包)

<javascript>

//这个方法的参数oSelect是select的对象

function preventSelectDisabled(oSelect)
{

   //得到当前select选中项的disabled属性。
   var isOptionDisabled = oSelect.options[oSelect.selectedIndex].disabled;

   //如果是有disabled属性的话
   if(isOptionDisabled)
   {

      //让他恢复上一次选择的状态，oSelect.defaultSelectedIndex属性是前一次选中的选项index
      oSelect.selectedIndex = oSelect.defaultSelectedIndex;
      return false;
   }

  //如果没有disabled属性的话
   else
   {

       //oSelect.defaultSelectedIndex属性，设置成当前选择的index
       oSelect.defaultSelectedIndex = oSelect.selectedIndex;
       return true;
   }
}

//为页面所有select绑定这个功能

$(document).ready(function(){
 $("select").each(
     function(){
      var tempfun=this.onchange;
      this.onchange=function(){
         if(!preventSelectDisabled(this)){return false};
         tempfun.call(this);
      }
    }
 )

//加上这段代码吧，如果加入你是A画面转到B画面的话，B画面需要根据A画面传来的参数来focus某些select的时候 ，你就这道他的作用了。

   $("select", document.forms[0]).each
    (
        function(i)
        {
            this.defaultSelectedIndex = this.selectedIndex;
        }
    );
});

</javascript>

我没去试，有兴趣的可以去试试。还有为了美化select而做的模拟select菜单。大家可以参考这段javascript代码。

<script language="javascript" type="text/javascript">

var childCreate=false;
function Offset(e)
//取标签的绝对位置
{
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight-2;
while(e=e.offsetParent)
{
t+=e.offsetTop;
l+=e.offsetLeft;
}
return {
top : t,
left : l,
width : w,
height : h
}
}
function loadSelect(obj){
//第一步：取得Select所在的位置
var offset=Offset(obj);
//第二步：将真的select隐藏
obj.style.display="none";
//第三步：虚拟一个div出来代替select
var iDiv = document.createElement("div");
iDiv.id="selectof" + obj.name;
iDiv.style.position = "absolute";
iDiv.style.width=offset.width + "px";
iDiv.style.height=offset.height + "px";
iDiv.style.top=offset.top + "px";
iDiv.style.left=offset.left + "px";
iDiv.style.background="url(images/monise_bg.gif) no-repeat right";
iDiv.style.border="1px solid #ddd";
iDiv.style.textAlign="left";
iDiv.style.paddingLeft="10px";
iDiv.style.color="#999";
iDiv.style.fontSize="12px";
iDiv.style.lineHeight=offset.height + "px";
iDiv.style.textIndent="4px";
document.body.appendChild(iDiv);
//第四步：将select中默认的选项显示出来
var tValue=obj.options[obj.selectedIndex].innerHTML;
iDiv.innerHTML=tValue;
//第五步：模拟鼠标点击
iDiv.onmouseover=function(){//鼠标移到
iDiv.style.background="url(images/monise_bg.gif) no-repeat right";
}
iDiv.onmouseout=function(){//鼠标移走
iDiv.style.background="url(images/monise_bg.gif) no-repeat right";
}
iDiv.onclick=function(){//鼠标点击
if (document.getElementById("selectchild" + obj.name)){
//判断是否创建过div
   if (childCreate){
    //判断当前的下拉是不是打开状态，如果是打开的就关闭掉。是关闭的就打开。
    document.getElementById("selectchild" + obj.name).style.display="none";
    childCreate=false;
   }else{
    document.getElementById("selectchild" + obj.name).style.display="";
    childCreate=true;
   }
}else{
   //初始一个div放在上一个div下边，当options的替身。
   var cDiv = document.createElement("div");
   cDiv.id="selectchild" + obj.name;
   cDiv.style.position = "absolute";
   cDiv.style.width=(offset.width+10) + "px";
   cDiv.style.height=(obj.options.length *20+10) + "px";
   cDiv.style.top=(offset.top+offset.height+2) + "px";
   cDiv.style.left=offset.left + "px";
   cDiv.style.background="#f7f7f7";
   cDiv.style.border="1px solid #333";
   cDiv.style.color="#666";
   var uUl = document.createElement("ul");
   uUl.id="uUlchild" + obj.name;
   uUl.style.listStyle="none";
   uUl.style.margin="0";
   uUl.style.paddingTop="5px";
   uUl.style.paddingBottom="5px";
   uUl.style.fontSize="12px";
   cDiv.appendChild(uUl);
   document.body.appendChild(cDiv);
   childCreate=true;
   for (var i=0;i<obj.options.length;i++){
    //将原始的select标签中的options添加到li中
    var lLi=document.createElement("li");
    lLi.id=obj.options[i].value;
    lLi.style.textIndent="4px";
    lLi.style.height="20px";
    lLi.style.lineHeight="20px";
    lLi.innerHTML=obj.options[i].innerHTML;
    uUl.appendChild(lLi);
   }
   var liObj=document.getElementById("uUlchild" + obj.name).getElementsByTagName("li");
   for (var j=0;j<obj.options.length;j++){
    //为li标签添加鼠标事件
    liObj[j].onmouseover=function(){
     this.style.background="#666";
     this.style.color="#fff";
     this.style.cursor="pointer"
    }
    liObj[j].onmouseout=function(){
     this.style.background="#fff";
     this.style.color="#666";
    }
    liObj[j].onclick=function(){
     //做两件事情，一是将用户选择的保存到原始select标签中，要不做的再好看表单递交后也获取不到select的值了。
     obj.options.length=0;
     obj.options[0]=new Option(this.innerHTML,this.id);
     //同时我们把下拉的关闭掉。
     document.getElementById("selectchild" + obj.name).style.display="none";
     childCreate=false;
     iDiv.innerHTML=this.innerHTML;
    }
   }
}
}
}

</script>

如果你还想在关键字输入框做个google suggest的效果，这就有点麻烦了。我还没找到个能兼容IE和Firefox的好代码，多半是上下按钮等等不能进行选择取消等。如果哪位大哥有兼容性比较完美的，麻烦记得告诉我一个。