jquery即时搜索查询插件jquery.search.js

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; "/> 

转载于:https://www.cnblogs.com/sameus/archive/2012/09/18/2690514.html