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代码
