在线做题ajax找题,ajax练习习题三搜索

易捷搜索

{

font-size:40px ;

font-style:italic;

top:100px;

width:30%;

height:80px;

left:35%;

position:absolute;

}

.text

{

height:60px;

top:200px;

width:30%;

left:35%;

position:absolute;

}

.shuru

{

border:#CF0 solid 3px ;

width:70%; height:40px;

padding:5px;

font-size:30px;

font-family:‘雅黑‘;

color: #FFF;

text-align:left;

}

.stn

{

background:#999;

border:#CCC solid 4px ;

font-size:33px ;

font:"雅黑";

margin-left:10px;

position: absolute;

}

.xs

{

border:1px;

top:280px;

width:30%;

left:39%;

position:absolute;

z-index:5;

}

.list

{

width:100;

margin-top:10px;

font:"雅黑";

font-style:oblique;

}

.jg

{

width:100%;

top:500px;

position:absolute;

}

#tb

{

border:#F00 solid 1px;

}

易捷汽车搜索

>

$("#sr").focus(function(e) {

$(this).css("background","#CC6");

});

$("#sr").blur(function(e) {

$(this).css("background","red");

});//时时提交

$("#sr").keyup(function(e) {var nr=$(".shuru").val();

$.ajax({async:false,

url:"chuli.php",

data:{nr:nr},

dataType:"TEXT",

type:"POST",

success: function(data){var hang=data.split("|");var str="";for (var i=0;i

{//var lie= hang[i].split("^");

str=str+"

"+hang[i]+"

";

}

$(".xs").html(str);

}

});//移入移出改变颜色

$(".list").mouseover(function(e) {

$(this).css("background","#C0F");

});

$(".list").mouseout(function(e) {

$(this).css("background","#FFF");

});

$(".list").click(function(e) {//选中内容显示到搜索框然后清除联想词

var xz=$(this).text();

$(".shuru").val(xz);

$(".xs").empty();//清楚搜索结果

$("#tb").empty();//显示选中内容的详细信息

var nr= $(".shuru").val();

$.ajax({async:false,

url:"chuli1.php",

data:{nr:nr},

dataType:"TEXT",

type:"POST",

success: function(data){var hang=data.trim().split("|");var str="

汽车名系列出厂日期油耗功率排量价格";for (var i=0;i

{var lie=hang[i].split("^");

str= str+"

"+lie[1]+""+lie[2]+""+lie[3]+""+lie[4]+""+lie[5]+""+lie[6]+"价格"+lie[7]+"";

}

$("#tb").html(str);

}

});

});

});//搜索钮搜索

$("#btn").click(function(e) {//根据·搜索框内容搜索

var nr= $("#sr").val();

$.ajax({async:false,

url:"chuli.php",

data:{nr:nr},

dataType:"TEXT",

type:"POST",

success: function(data){var hang=data.split("|");var str="";for (var i=0;i

{//var lie= hang[i].split("^");

str=str+"

"+hang[i]+"

";

}

$(".xs").html(str);

}

});//移入移出改变颜色

$(".list").mouseover(function(e) {

$(this).css("background","#C0F");

});

$(".list").mouseout(function(e) {

$(this).css("background","#FFF");

});

$(".list").click(function(e) {//选中内容显示到搜索框然后清除联想词

var xz=$(this).text();

$(".shuru").val(xz);

$(".xs").empty();//清楚搜索结果

$("#tb").empty();//选中内容显示到搜索框然后清除联想词

var xz=$(this).text();

$(".shuru").val(xz);

$(".xs").empty();//清楚搜索结果

$("#tb").empty();//显示选中内容的详细信息

var nr= $(".shuru").val();

$.ajax({async:false,

url:"chuli1.php",

data:{nr:nr},

dataType:"TEXT",

type:"POST",

success: function(data){var hang=data.trim().split("|");var str="

汽车名系列出厂日期油耗功率排量价格";for (var i=0;i

{var lie=hang[i].split("^");

str= str+"

"+lie[1]+""+lie[2]+""+lie[3]+""+lie[4]+""+lie[5]+""+lie[6]+"价格"+lie[7]+"";

}

$("#tb").html(str);

}

});

});

});

});