jquery_jqueryに基づく自動補完機能

この記事の例では、jqueryをベースにした自動補完機能の方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

コードをコピー コードは次のとおりです:

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

");
$("#sele").keyup(function(even) {
var v = Even.that;
If (v == 38 || v == 40 || v == 13)// 上下キーまたは OK キーをクリックしたときにデータを送信できないようにします
{
return;
}
var txt = $("#sele").val();//ここで入力ボックスの値を取得します
If (txt != "") {
//データを組み立てます
$.ajax({
url: "Birthday_autoCompletion",// バックグラウンドから json データを取得します
「投稿」と入力します。
dataType: "json",
データ: {"bir.userName": txt
},
成功: function(ls) {
var offset = $("#sele").offset();
$("#autoTxt").show();
$("#autoTxt").css("top", (offset.top 30) "px");
$("#autoTxt").css("left", offset.left "px");
var 候補 = "";
maxcount = 0;//値を再度取得します
$.each(ls, function(k, v) {
候補 = "

" v "

";
                                                                                                                                                                              });
$("#autoTxt").html(候補);
$("#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("背景", "#FFFFFF");
                            $("#autoTxt li:eq(" this.id ")").css("background", "#A8A5A5");
                            thisCount=this.id;},function(){
                                $("#autoTxt li").css("背景", "#FFFFFF");});
                }、
                エラー: function() {
                    $("#autoTxt").html("");
                    $("#autoTxt").hide();
                    maxcount = 0;
                }
            });
        } else {
            $("#autoTxt").hide();
            maxcount = 0;
            $("#sestart").click();
        }
    });
    //当单击ＢＯＤＹ時間则隐藏搜索值
    $("body").click(function(){
        $("#autoTxt").html("");
        $("#autoTxt").hide();
        thisCount=0;
    });
    // 写移イベント// 上键３８ 下键４０ 確定键 １３
    $("body").keyup(function(even) {
        var v = 偶数.どれ;
            if (v == 38)// 按上键時
            {
                if(thisCount!=0){// がゼロの場合は説明を終了できません。焦点を取得する
                    $("#sele").blur();
                    if(thisCount>0)
                        --thisCount;
                    それ以外
                        thisCount=0;
                $("#autoTxt li").css("背景", "#FFFFFF");
                $("#autoTxt li:eq(" thisCount ")").css("background", "#A8A5A5");
                }else{$("#sele").focus();}
            } else if (v == 40) {// 按下键時
                if(thisCount                 {
                    $("#sele").blur();
                    thisCount;
                    $("#autoTxt li").css("背景", "#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();
                    }その他
                    {
                        if($("#sele").val()!="")
                        $("#sestart").click();
                    }
            } else {
                if($("#autoTxt").html()!="")
                    {
                        $("#sele").focus();
                        thisCount=0;
                    }
            }
    });
});

ここで説明されている大規模な jQuery プログラムの設計が役立つことを望みます。