Maison > interface Web > js tutoriel > Fonction de complétion automatique basée sur jquery_jquery

Fonction de complétion automatique basée sur jquery_jquery

WBOY
Libérer: 2016-05-16 16:10:04
original
1098 Les gens l'ont consulté

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();
            >
        });
        //当单击BODY时则隐藏搜索值
        $("corps").click(function(){
            $("#autoTxt").html("");
            $("#autoTxt").hide();
            thisCount=0;
        });
        // 写移动事件//上键38 下键40 确定键 13
        $("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程序设计有所帮助。

    Étiquettes associées:
    source:php.cn
    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Tutoriels populaires
    Plus>
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal