本文实例讲述了基于jquery实现的自动补全功能的方法。分享给大家供大家参考。具体实现方法如下：
$(function() {
// 自动补全
var maxcount = 0;// 表示他最大的值
var thisCount =0;// 初始化他框的位置
$("body").prepend("<div style='width:120px; display:none; background:#FFFFFF; position: absolute;' id='autoTxt'></div>");
$("#sele").keyup(function(even) {
var v = even.which;
if (v == 38 || v == 40 || v == 13)// 当点击上下键或者确定键时阻止他传送数据
{
return;
}
var txt = $("#sele").val();//这里是取得他的输入框的值
if (txt != "") {
//拼装数据
$.ajax({
url : "Birthday_autoCompletion",//从后台取得json数据
type : "post",
dataType : "json",
data : {"bir.userName" : txt
},
success : function(ls) {
var offset = $("#sele").offset();
$("#autoTxt").show();
$("#autoTxt").css("top", (offset.top + 30) + "px");
$("#autoTxt").css("left", offset.left + "px");
var Candidate = "";
maxcount = 0;//再重新得值
$.each(ls, function(k, v) {
Candidate += "<li id='" +maxcount+ "'>" + v + "</li>";
maxcount++;
});
$("#autoTxt").html(Candidate);
$("#autoTxt li:eq(0)").css("background", "#A8A5A5");
//高亮对象
$('body').highLight();
$('body').highLight($("#sele").val());
event.preventDefault();
//当单击某个ＬＩ时反映
$("#autoTxt li").click(function(){
$("#sele").val($("#autoTxt li:eq("+this.id+")").text());
$("#autoTxt").html("");
$("#autoTxt").hide();
});
//移动对象
$("#autoTxt li").hover(function(){
$("#autoTxt li").css("background", "#FFFFFF");
$("#autoTxt li:eq("+this.id+")").css("background", "#A8A5A5");
thisCount=this.id;},function(){
$("#autoTxt li").css("background", "#FFFFFF");});
},
error : function() {
$("#autoTxt").html("");
$("#autoTxt").hide();
maxcount = 0;
}
});
} else {
$("#autoTxt").hide();
maxcount = 0;
$("#sestart