웹 프론트엔드 JS 튜토리얼 jquery_jquery 기반 자동 완성 기능

jquery_jquery 기반 자동 완성 기능

May 16, 2016 pm 04:10 PM
jquery 기능 자동완성

이 글의 예시에서는 jquery를 기반으로 자동 완성 기능을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

$(function() {
    // 自动补全
    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)// 상하 키 또는 확인 키를 클릭할 때 데이터 전송을 방지
                {
             반품;
            }
        var txt = $("#sele").val();//여기서 입력 상자의 값을 가져옵니다
If (txt != "") {
//데이터 취합
               $.ajax({
​​​​​​​ url: "Birthday_autoCompletion",//백그라운드에서 json 데이터 가져오기
              유형: "게시물",
                 데이터 유형: "json",
                    데이터: {"bir.userName": txt
                 },
성공 : 함수(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) {
후보자 = "<li id='" maxcount "'>" v "</li>";
>                                                                         });
$("#autoTxt").html(후보자);
                       $("#autoTxt li:eq(0)").css("배경", "#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("배경", "#A8A5A5");
                            thisCount=this.id;},function(){
                                $("#autoTxt li").css("배경", "#FFFFFF");});
                },
                오류: 함수() {
                    $("#autoTxt").html("");
                    $("#autoTxt").hide();
                    최대 개수 = 0;
                }
            });
        } 그 밖의 {
            $("#autoTxt").hide();
            최대 개수 = 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;
                    그 외
                        thisCount=0;
                $("#autoTxt li").css("배경", "#FFFFFF");
                $("#autoTxt li:eq(" thisCount ")").css("배경", "#A8A5A5");
                }else{$("#sele").focus();}
            } else if (v == 40) {// 按下键时
                if(thisCount<maxcount-1)
                {
                    $("#sele").blur();
                    thisCount;
                    $("#autoTxt li").css("배경", "#FFFFFF");
                    $("#autoTxt li:eq(" thisCount ")").css("배경", "#A8A5A5");
                }
            } else if (v == 13) {// 按确认键时
                var tt=$("#" thisCount).text();
                if(tt!="")
                    {
                        $("#sele").val(tt);
                        $("#autoTxt").html("");
                        $("#autoTxt").hide();
                    }다른
                    {
                        if($("#sele").val()!="")
                        $("#sestart").click();
                    }
            } 그 밖의 {
                if($("#autoTxt").html()!="")
                    {
                        $("#sele").focus();
                        thisCount=0;
                    }
            }
    });
});

希望本文所述对大家의 jQuery는 매우 유용합니다.

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Doubao 앱에는 어떤 기능이 있나요? Doubao 앱에는 어떤 기능이 있나요? Mar 01, 2024 pm 10:04 PM

Doubao 앱에는 어떤 기능이 있나요?

vivox100s와 x100의 차이점: 성능 비교 및 ​​기능 분석 vivox100s와 x100의 차이점: 성능 비교 및 ​​기능 분석 Mar 23, 2024 pm 10:27 PM

vivox100s와 x100의 차이점: 성능 비교 및 ​​기능 분석

디스커스란 무엇인가요? Discuz의 정의 및 기능 소개 디스커스란 무엇인가요? Discuz의 정의 및 기능 소개 Mar 03, 2024 am 10:33 AM

디스커스란 무엇인가요? Discuz의 정의 및 기능 소개

셀프미디어란 정확히 무엇인가? 주요 특징과 기능은 무엇입니까? 셀프미디어란 정확히 무엇인가? 주요 특징과 기능은 무엇입니까? Mar 21, 2024 pm 08:21 PM

셀프미디어란 정확히 무엇인가? 주요 특징과 기능은 무엇입니까?

PHP 팁: 이전 페이지로 돌아가는 기능을 빠르게 구현 PHP 팁: 이전 페이지로 돌아가는 기능을 빠르게 구현 Mar 09, 2024 am 08:21 AM

PHP 팁: 이전 페이지로 돌아가는 기능을 빠르게 구현

Xiaohongshu 계정 관리 소프트웨어의 기능은 무엇입니까? Xiaohongshu 계정을 운영하는 방법은 무엇입니까? Xiaohongshu 계정 관리 소프트웨어의 기능은 무엇입니까? Xiaohongshu 계정을 운영하는 방법은 무엇입니까? Mar 21, 2024 pm 04:16 PM

Xiaohongshu 계정 관리 소프트웨어의 기능은 무엇입니까? Xiaohongshu 계정을 운영하는 방법은 무엇입니까?

Linux에서 GDM의 기능과 기능에 대한 자세한 설명 Linux에서 GDM의 기능과 기능에 대한 자세한 설명 Mar 01, 2024 pm 04:18 PM

Linux에서 GDM의 기능과 기능에 대한 자세한 설명

PHP는 어떤 용도로 사용되나요? PHP의 역할과 기능 살펴보기 PHP는 어떤 용도로 사용되나요? PHP의 역할과 기능 살펴보기 Mar 24, 2024 am 11:39 AM

PHP는 어떤 용도로 사용되나요? PHP의 역할과 기능 살펴보기

See all articles