欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

基于jquery实现的自动补全功能_jquery

程序员文章站 2022-04-25 13:14:24
...
本文实例讲述了基于jquery实现的自动补全功能的方法。分享给大家供大家参考。具体实现方法如下:

复制代码 代码如下:

$(function() {
// 自动补全
var maxcount = 0;// 表示他最大的值
var thisCount =0;// 初始化他框的位置
$("body").prepend("");
$("#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 += "
  • " + v + "
  • ";
    maxcount++;
    });
    $("#autoTxt").html(Candidate);
    $("#autoTxt li:eq(0)").css("background", "#A8A5A5");
    //高亮对象
    $('body').highLight();
    $('body').highLight($("#sele").val());
    event.preventDefault();
    //当单击某个LI时反映
    $("#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").click();
    }
    });
    //当单击BODY时则隐藏搜索值
    $("body").click(function(){
    $("#autoTxt").html("");
    $("#autoTxt").hide();
    thisCount=0;
    });
    // 写移动事件//上键38 下键40 确定键 13
    $("body").keyup(function(even) {
    var v = even.which;
    if (v == 38)// 按上键时
    {
    if(thisCount!=0){//等于零时则证明不能上了。所以获得焦点
    $("#sele").blur();
    if(thisCount>0)
    --thisCount;
    else
    thisCount=0;
    $("#autoTxt li").css("background", "#FFFFFF");
    $("#autoTxt li:eq("+thisCount+")").css("background", "#A8A5A5");
    }else{$("#sele").focus();}
    } else if (v == 40) {// 按下键时
    if(thisCount {
    $("#sele").blur();
    ++thisCount;
    $("#autoTxt li").css("background", "#FFFFFF");
    $("#autoTxt li:eq("+thisCount+")").css("background", "#A8A5A5");
    }
    } else if (v == 13) {// 按确认键时
    var tt=$("#"+thisCount).text();
    if(tt!="")
    {
    $("#sele").val(tt);
    $("#autoTxt").html("");
    $("#autoTxt").hide();
    }else
    {
    if($("#sele").val()!="")
    $("#sestart").click();
    }
    } else {
    if($("#autoTxt").html()!="")
    {
    $("#sele").focus();
    thisCount=0;
    }
    }
    });
    });

    希望本文所述对大家的jQuery程序设计有所帮助。