ajax完成仿百度自动补全功能

      效果和百度差不多 ，由于是个demo我就没有使用数据库，真正的做法应该是在数据库有一张关键字表。当用户输入关键字后使用ajax技术到服务器模糊查询到与用户输入的关键字开头的数据，返回填充到下拉框显示，用户通过鼠标或上下键可以选择关键字填充到搜索框，如果数据库中没有这关键字，在用户点击搜索时一并将此关键词存入数据库，供其他用户访问时候能联想，如果有关键字那就给他访问量++  ，在显示关键字列表时候能按照人气排行下来，比如宝强哥出轨时候百度输入个宝宝下面全是与他开头的糗事。。哈哈，废话不多说了：

后端代码用list模仿了个数据库，先看效果图：

省略get and set.............................................

js代码

$(function() {

$(".key-value").keyup(function(){

//拿到输入框值

var keyValue = $(".key-value").val();

//如果用户输入空或正在按选择键那就不用发送请求

if(keyValue==""||event.keyCode==38||event.keyCode==40){

//不用发送请求 什么也不干

}

else{

//否则发送ajax请求

var url = "key_findKey.action";

var data = {"keyWord":keyValue};//拿到要传送的数据

$(".index").val(0);//定义索引为0  主要对后期选项判断进行位置定位

$.post(url,data,function(data){//发送请求啦

if(data.length>0){//如果有返回数据 就处理啊

$("select").show();//显示下拉框var arrKeys = data.split(",");$("[name='keyList']").attr("size",arrKeys.length-1);//设置下拉框的大小就是数据的条数$(".keys-size").val(arrKeys.length-1);//最大的数据位置var html = "";for(var i =0;i"+arrKeys[i]+"";

}

$("select").html(html);//拼接成选线列表填充到select中

$("option").click(function(){//单击选项列表将单击的值放入搜索框

$(".key-value").val($(this).val());

$("select").hide();//放入之后隐藏

// submit();提交

});

}else{

//如果返回数据为空就继续隐藏着哦！

$("select").hide();

}

});

}

//按下上下键可以选下拉框中的内容填充到搜索框

if(event.keyCode==40||event.keyCode==38){//当按上 或下时触发

var index = $(".index").val();//默认选中第一个  得到隐藏表单索引值

if(index>=$(".keys-size").val()){//如果索引值大于数据的最后一条位置

index=$(".keys-size").val();//就让他等于数据的最大值  也就是选中最后一条  不至于溢出

}

if(index<1){//

index=0;

}

if(index==1){//表明移入表单  就不用选中了

$($(".select-option")[0]).removeAttr("selected");

}if(event.keyCode==40){//按下 下键

$($(".select-option")[index]).attr("selected","selected");//选中该选中的列表

index++;//

$(".index").val(index);//记录索引值

$(".key-value").val($("select").val());//让搜索框值等于当前选中的值

}else if(event.keyCode==38){//按下上件  上移动

$($(".select-option")[index-2]).attr("selected","selected");

index--;

$(".index").val(index);//记录索引值

$(".key-value").val($("select").val());//让搜索框值等于当前选中的值

}

}

});

});

html代码