jquery.search.jsjquery自动完成,即时搜索查询插件
jquery.search.js搜索插件是一款基于jquery的插件,任何一个input输入款均可即时转为查询框,可分为前台数据直接显示和后台传输数据显示两种方案!
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;/>