下面这页代码是我制作的一个简单的类似于百度主页搜索的事件。
主要事件是在文本框上输入关键字，下面会有一个div显示出来你模糊关键字的数据。
并且点击下面的数据，数据会直接跳到文本框中。
还有鼠标放上变色的一个小事件。
有兴趣的可以看一下。
<script src="jquery-1.11.2.min.js">
</script>
<style type="text/css">
*{ margin:0px; auto; padding:0px;}
#xianshi{ margin-top:30px; width:300px; margin-left:500px;}
#txt{ width:300px;}
#list{ width:300px; height:100px; position:absolute;}
#name{ width:295px; height:30px;}
.sj{width: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>
时间： 2024-11-14 12:56:00