下面这页代码是我制作的一个简单的类似于百度主页搜索的事件。
主要事件是在文本框上输入关键字，下面会有一个div显示出来你模糊关键字的数据。
并且点击下面的数据，数据会直接跳到文本框中。
还有鼠标放上变色的一个小事件。
有兴趣的可以看一下。
<script src="jquery-1.11.2.min.js"> </script> <style type="text/css"> *{ margin:0px; auto; padding:0px;} #xianshi{ margin-top:30px; 300px; margin-left:500px;} #txt{ 300px;} #list{ 300px; height:100px; position:absolute;} #name{ 295px; height:30px;} .sj{300px; border:1px solid #000; background-color:#FFF;} .sj:hover{cursor:pointer} #fg{ margin-top:50px;} </style> <body> //做一个div 用于锁定样式 <div id="xianshi"> //做一个div，里面套一个输入关键字的文本框 <div id="txt"> //做一个文本框，设置id为name. <input type="text" id="name" /> </div> 做一个div，存放输入关键字后的搜索到的信息 <div id="list"></div> </div> <hr id="fg" /> <table border="1" width="100%" cellpadding="0" cellpadding="0" id="td"> </table> </body> //开始编写jq特效 <script type="text/javascript"> $(document).ready(function(e) { //在id为name的文本框上加一个输入事件 $("#name").keyup(function(){ Xianshi(); //取出文本框中的值，用key接收 var key = $(this).val(); //输入ajax $.ajax({ async:false, url:"xianshichuli.php", data:{key:key,bs:0}, type:"POST", dataType:"TEXT", success: function(data){ if(data.trim()=="") { } else { //把传入的数组拆分成字符串 var shuju = data.trim().split("|"); var str = ""; //循环这个数组 for(var i = 0; i<shuju.length;i++) { shuju[i]; str = str+"<div class = 'sj'>"+shuju[i]+"</div>"//把循环出来的字符串放入div里 } $("#list").html(str);//把取出来的值放入list div里。 $("#list").css("display","block") } } }); $(".sj").mouseover(function(){ //加入一个sj的鼠标放上事件 $("#sj").css("background-color","white"); $(this).css("background-color","#FC0"); //鼠标放上改变背景颜色 }) $(".sj").mouseout(function(){ $(this).css("background-color","white"); //鼠标移出返回原来的字体颜色 }) $(".sj").click(function(){ //加入一个sj的点击事件 var text = $(this).text();//取出sj里的值， 用text接收。 $("#name").val(text);//把取出的值放入name文本框里。 $("#list").css("display","none") }) Xianshi(); }) }); function Xianshi() { var key = $("#name").val(); $.ajax({ url:"xianshichuli.php", data:{key:key,bs:1}, type:"POST", dataType:"TEXT", success: function(data) { var hang = data.trim().split("|") var str = "<tr><td>汽车名称</td><td>型号</td><td>发布时间</td><td>油耗</td><td>汽车价格</td></tr>"; for(var i=0; i<hang.length;i++) { var lie = hang[i].split("^"); str = str +"<tr><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td>"+lie[4]+"</td><td>"+lie[7]+"</td></tr>"; } $("#td").html(str); } }) } </script>