Fonction de complétion automatique basée sur jquery_jquery

L'exemple de cet article décrit la méthode de fonction de complétion automatique basée sur jquery. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :

Copier le code Le code est le suivant :

$(function() {
    // 自动补全
    var maxcount = 0;// 表示他最大的值
    var thisCount =0;// 初始化他框的位置
    $("body").prepend("

");
$("#sele").keyup(function(even) {
      var v = pair.which;
If (v == 38 || v == 40 || v == 13)// L'empêcher de transmettre des données en cliquant sur les touches haut et bas ou sur la touche OK
                {
             revenir ;
            }
        var txt = $("#sele").val();//Voici pour obtenir la valeur de sa zone de saisie
Si (txt != "") {
//Assembler les données
               $.ajax({
​​​​​​​ url : "Birthday_autoCompletion",//Obtenir les données json en arrière-plan
              tapez : "post",
                 Type de données : "json",
                    données : {"bir.userName": txt
                 },
succès : fonction(ls) {
                  var offset = $("#sele").offset();
$("#autoTxt").show();
$("#autoTxt").css("top", (offset.top 30) "px");
                        $("#autoTxt").css("left", offset.left "px");
                  var Candidat = "";
maxcount = 0;//Récupérer à nouveau la valeur
                             $.each(ls, function(k, v) {
Candidat = "

" v "

";
                                                                                                                                                                                });
$("#autoTxt").html(Candidat);
                        $("#autoTxt li:eq(0)").css("background", "#A8A5A5");
//Mettre en surbrillance l'objet
$('body').highLight();
                                     $('body').highLight($("#sele").val());
                    event.preventDefault();
//Réfléchissez lorsqu'un LI est cliqué
$("#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");});
                },
                erreur : fonction() {
                    $("#autoTxt").html("");
                    $("#autoTxt").hide();
                    nombre maximum = 0;
                >
            });
        } autre {
            $("#autoTxt").hide();
            nombre maximum = 0;
            $("#sestart").click();
        >
    });
    //当单击ＢＯＤＹ时则隐藏搜索值
    $("corps").click(function(){
        $("#autoTxt").html("");
        $("#autoTxt").hide();
        thisCount=0;
    });
    // 写移动事件//上键３８ 下键４０ 确定键 １３
    $("body").keyup(function(even) {
        var v = pair.which;
            si (v == 38)// 按上键时
            {
                if(thisCount!=0){//等于零时则证明不能上了。所以获得焦点
                    $("#sele").blur();
                    si(thisCount>0)
                        --thisCount;
                    d'autre
                        thisCount=0;
                $("#autoTxt li").css("background", "#FFFFFF");
                $("#autoTxt li:eq("thisCount ")").css("background", "#A8A5A5");
                }else{$("#sele").focus();}
            } else if (v == 40) {// 按下键时
                si(thisCount                 {
                    $("#sele").blur();
                    ceCompte ;
                    $("#autoTxt li").css("background", "#FFFFFF");
                    $("#autoTxt li:eq("thisCount ")").css("background", "#A8A5A5");
                >
            } else if (v == 13) {// 按确认键时
                var tt=$("#" thisCount).text();
                si(tt!="")
                    {
                        $("#sele").val(tt);
                        $("#autoTxt").html("");
                        $("#autoTxt").hide();
                    }ailleur
                    {
                        if($("#sele").val()!="")
                        $("#sestart").click();
                    >
            } autre {
                if($("#autoTxt").html()!="")
                    {
                        $("#sele").focus();
                        thisCount=0;
                    >
            >
    });
});

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