jquery.search.js搜索插件是一款基于jquery的插件,任何一个input输入款均可即时转为查询框,可分为前台数据直接显示和后台传输数据显示两种方案!

 文档说明:http://www.sameus.com

   代码下载地址: http://code.google.com/p/17sameus/downloads/list

使用方式

jquery.search.js插件统一调用:

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="jquery.Search.js"></script>

    方式一:前台直接显示数据

<script type="text/javascript">

$(document).ready(function(){

/*用法一:从后台及时传输数据到前台*/

var data={

durl:'data.php', /*及时调取数据的链接*/

surl:'search.php?',     /*数据传输到后台的链接,需要加上?*/

send_data:true    /*是否从远程调取数据库*/

};

$('#searchone').searchs(data);

})

</script>

<style type="text/css">

.selected{ background-color:#cccccc ;}

a{ text-decoration:none;}

</style>

</head>

<!--头部公共文件-->

<div  id="tagindex">

<div id="tagmain" style="margin:50px 50px;padding:20px;height:300px;width:600px;border:1px solid silver; ">

<h2>即时搜索插件-示例1</h2>

<p style="font-size:13px;color:brown; ">

输入"1"查询,按上下键选择,按回车键提交

</p>

<div  style="width: 200px;margin:20px;">

<input name="" type="text" id="searchone" maxlength="10" size="30"  style="border:1px solid #OOO; "/>

</div>

</div>

</div>

    方式二:即时从后台传输数据并显示数据

<script type="text/javascript">

$(document).ready(function(){

/*用法二:直接前台提示数据*/

var data={

surl:'search.php?', /*数据传输到后台的链接,需要加上?*/

local_data:{'shop':'"店铺"中搜索','weibo':'"微博"中搜索','both':'"全部"中搜索'},/*本地将显示的数据*/

send_data:false/*是否从远程调取数据库*/

};

$('#searchtwo').searchs(data);

})

</script>

<style type="text/css">

.selected{

background-color:#cccccc;

}

A:link {

color: #000000;

TEXT-DECORATION: none

}

A:visited {

COLOR: #000000;

TEXT-DECORATION: none

}

A:hover {

COLOR: #ff7f24;

text-decoration: underline;

}

A:active {

COLOR: #ff7f24;

text-decoration: underline;

}

</style>

</head>

<!--头部公共文件-->

<h2>即时搜索插件-示例2</h2>

<p style="font-size:13px;color:brown;">

输入"1"查询,按上下键选择,按回车键提交

</p>

<input name="" type="text" id="searchtwo"  maxlength="10" size="30" style="border:1px solid #OOO; "/>