欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于jquery實(shí)現(xiàn)的自動(dòng)補(bǔ)全功能

 更新時(shí)間:2015年03月12日 09:53:35   作者:th小米粥  
這篇文章主要介紹了基于jquery實(shí)現(xiàn)的自動(dòng)補(bǔ)全功能的方法,涉及jQuery操作數(shù)據(jù)實(shí)現(xiàn)補(bǔ)全的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了基于jquery實(shí)現(xiàn)的自動(dòng)補(bǔ)全功能的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:

復(fù)制代碼 代碼如下:

$(function() {
    // 自動(dòng)補(bǔ)全
    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)// 當(dāng)點(diǎn)擊上下鍵或者確定鍵時(shí)阻止他傳送數(shù)據(jù)
            {
            return;
            }
        var txt = $("#sele").val();//這里是取得他的輸入框的值
        if (txt != "") {
            //拼裝數(shù)據(jù)
            $.ajax({
                url : "Birthday_autoCompletion",//從后臺(tái)取得json數(shù)據(jù)
                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");
                    //高亮對(duì)象
                    $('body').highLight();
                    $('body').highLight($("#sele").val());
                    event.preventDefault();
                        //當(dāng)單擊某個(gè)LI時(shí)反映
                        $("#autoTxt li").click(function(){
                            $("#sele").val($("#autoTxt li:eq("+this.id+")").text());
                            $("#autoTxt").html("");
                            $("#autoTxt").hide();
                        });
                        //移動(dòng)對(duì)象
                        $("#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();
        }
    });
    //當(dāng)單擊BODY時(shí)則隱藏搜索值
    $("body").click(function(){
        $("#autoTxt").html("");
        $("#autoTxt").hide();
        thisCount=0;
    });
    // 寫(xiě)移動(dòng)事件//上鍵38 下鍵40 確定鍵 13
    $("body").keyup(function(even) {
        var v = even.which;
            if (v == 38)// 按上鍵時(shí)
            {
                if(thisCount!=0){//等于零時(shí)則證明不能上了。所以獲得焦點(diǎn)
                    $("#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) {// 按下鍵時(shí)
                if(thisCount<maxcount-1)
                {
                    $("#sele").blur();
                    ++thisCount;
                    $("#autoTxt li").css("background", "#FFFFFF");
                    $("#autoTxt li:eq("+thisCount+")").css("background", "#A8A5A5");
                }
            } else if (v == 13) {// 按確認(rèn)鍵時(shí)
                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;
                    }
            }
    });
});

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論