近期,有个任务是模仿百度搜索样式的,原来是自己想写一个的,怎料自己的js水平有点差,想了半天,还是没有什么思路,后来无意中发现了bigautocomplete,用研究了一下,还是很好用的,下面,来简要的讲讲他的用法吧
一,没有与后台进行交互
首先要将bigautocomplete加载进来
<span style="font-size:18px;"><link rel="stylesheet" href="../css/jquery.bigautocomplete.css" type="text/css" />//下拉框的样式
<script type="text/javascript" src="../js/jquery-1.6.1.js"></script>
<script type="text/javascript" src="../js/jquery.bigautocomplete.js"></script>//引用bigautocomplete</span>
其次,写对应的文本框,
<span style="font-size:18px;"><input type="text" id="tt" style="width:300px;"/>
$(function(){
$("#tt").bigAutocomplete({data:[{title:"book"},
{title:"blue"},
{title:"fool"},
{title:"bus"}]});
})</span>
这样在文本框中输入b就会出现如图所示的效果
二,与后台进行交互
首先要将bigautocomplete加载进来
<span style="font-size:18px;"><link rel="stylesheet" href="../css/jquery.bigautocomplete.css" type="text/css" />//下拉框的样式
<script type="text/javascript" src="../js/jquery-1.6.1.js"></script>
<script type="text/javascript" src="../js/jquery.bigautocomplete.js"></script>//引用bigautocomplete
<pre name="code" class="html">其次,写对应的文本框,
<span style="font-size:18px;"><input type="text" id="tt" value="" class="text" οnkeyup="change()"/>//其中onkeyup表示,数据进行实时的查询
</span><pre name="code" class="html"><span style="font-size:18px;">function change(){
if($("#tt").val()==""){
return;
}
else{
$("#tt").bigAutocomplete({url:"index.php"});//url表示后台交互的链接,这里以index.php举例
}
}</span>
最后,来看看index.php中的内容吧
$date = [{title:"book"},{title:"blue"},{title:"fool"},{title:"bus"}];
echo '{"data":'.$date.'}';//前面的data是固定的,$date表示下拉框中的内容,但必须是json格式的,
exit;
这样你就能看到你要的效果了