지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

텍스트 상자 텍스트 자동 완성 효과 예시 Sharing_jquery

WBOY
풀어 주다： 2016-05-16 17:03:21
원래의
903명이 탐색했습니다.

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

/*文本自动补全 zhouxiang*/

(함수($) {
$.Completion = 함수(설정) {
var opts = $.extend({}, $.Completion.DefaultSetting, 설정);
//너비
var Completion_Width = null;
var Completion_Height = null;
var Completion_Height = null;
var Completion_Data_Url = null;
//Object
var Completion_Obj = null;
var Completion_Obj_Show = null;
var Completion_Obj_Show = null;
var Completion_Obj_MarginLeft = null;
var Completion_Obj_MarginLeft letion_Obj_MarginTop = null;
//객체 높이
var Completion_Obj_Height = null;
//카테고리
var Completion_Count = null;
//
var Completion_Type_obj = null;
// Content
var Completion_Value = null;
                                                                                       사용 사용 사용 사용 사용 사용 사용 사용       out out out out out out out out Out Out of ''''     ' ‐ ‐ ‐ ‐ down through-set ​ to var Completion_N = 0; 🎜 >         // 콜백 입력
        var Completion_ClickCall = null;
                       // 콜백 입력 🎜> //바인딩 이벤트
Completion_Obj_AddEvent();
}
        //初始化
        function Init() {
            Completion_Obj_Show = opts.Completion_Obj_Show;
            //获取对象
            Completion_Obj = opts.Completion_Obj;
            //获取对象宽度
            Completion_Width = Completion_Obj.width();
            //获取层显示高度
            Completion_Height = opts.Completion_Height;
            //获取访问数据库URL
            Completion_Data_Url = opts.Completion_Data_Url;
            //每次查询多少条记录
            Completion_Count = opts.Completion_Count;
            //获取对象高度
            Completion_Obj_Height = Completion_Obj.height();
            //获取左边距
            Completion_Obj_MarginLeft = Completion_Obj.offset().left;
            //获取上边距
            Completion_Obj_MarginTop = parseInt(Completion_Obj.offset().top) + parseInt(Completion_Obj_Height);
            Completion_Type_obj = opts.Completion_Type_obj;
            Completion_Bool = opts.Completion_Bool;
            Completion_ClickCall = opts.Completion_ClickCall;
        }
        //给对象添加事件
        function Completion_Obj_AddEvent() {
            Completion_Obj.keyup(function (event) {
                switch (event.keyCode) {
                    case 38:
                        break;
                    case 40:
                        break;
                    case 13:
                        Completion_ClickCall();
                        break;
                    default:
                        //按键事件 延迟操作

                        Cimpletion_Bind();
                        break;
                }

            });
            Completion_Obj.keydown(function (event) {
                switch (event.keyCode) {
                    case 13:
                        break;
                    case 38:
                        if (Completion_N == 0) {
                            Completion_N = (Completion_Obj_Show.find("li").length - 1);
                        } else if (Completion_N != 0) {
                            Completion_N = Completion_N - 1;
                        }
                        //alert(Completion_N);
                        Completion_Obj_Show.find("li").find("a").removeClass("Completion-guess-list-hover");
                        Completion_Obj_Show.find("li").eq(Completion_N).find("a").addClass("Completion-guess-list-hover");
                        Completion_Obj.val(Completion_Obj_Show.find("li").eq(Completion_N).find("ul").text());


                        break;
                    case 40:
                        if (Completion_N + 1 < Completion_Obj_Show.find("li").length) {
Completion_N = Completion_N + 1;
} else if (Completion_N + 1 == Completion_Obj_Show.find("li").length) {
Completion_N = 0;
}
Completion_Obj_Show.find("li").find("a").removeClass("Completion-guess-list-hover");
Completion_Obj.val(Completion_Obj_Show.find("li").eq(Completion_N).find("ul").text());
Completion_Obj_Show.find("li").eq(Completion_N).find("a").addClass("Completion-guess-list-hover");

break;
default:
break;

                                                                                                             
Completion_Value = Completion_Value.replace(" ", "" );
                                                                                                         이용 ~             {
Completion_Obj_Show.hide();
}
}
// 확인
함수 Completing_verification(obj) {
if (obj == "" "|| Obj == NULL || Obj == 정의되지 않음) {
RETURN FALSE ;
                                                          url: Completion_Data_Url,
데이터: { CompletionValue: Completion_Value, CompletionCount : Completion_Count, CompletionType: Completion_Type },
유형: "post",
dataType: "json",
성공: 함수(obj) {
                                      ~ | ;
                                                                       letion_Obj.val(obj.find("ul").text ());
Completion_Obj_Show.hide();
}
//构造内容
function Completion_Add_Html(obj) {
var data = obj.Completion_Data;
//执行验证
Completion_Verification(data);
var ComPletion_Li = "";
if (data != null && data != undefined) {
for (var i = 0; i < data.length; i++) {
//执行验证是否为空
var dr = data[i];
Completion_Verification(dr);
var ComPletionName = dr.ComPletion_Name;

                   ComPletionName = ComPletionName.replace(Completion_Value.toUpperCase(), "" Completion_Value.toUpperCase() "");
                  ComP letion_Li = "< ;li>约" dr.ComPletion_Count "条记录

";
              }
               if (ComPletion_Li != "") {
                   Completion_H tml = "
    " ComPletion_Li "
";
                   Completion_Obj_Html(Completion_Html);
             } else {
                  Completion_Obj_Show. hide();
                }
            }
        }
        //마우스
        function MouseHover(obj) {
            Completion_Obj_Show.find("li").mouseover(function () {
               Completion_Obj_Show.find("li").find("a").removeClass("Completion -guess-list-hover");
                Completion_Obj.val($(this).find("ul").text());
               Completion_N = Completion_Obj_Show.find("li").index(this );
            });
        }
        //绑定到控件
        함수 Completion_Obj_Html(html) {
           Completion_Obj_Show.show ();
            Completion_Obj_Show.html("")
            Completion_Obj_Show.css({ "width": Completion_Width 6, "height": Completion_Height, "border-width": "1px", "border-color": "#CCC", "border-top-width": " 0px", "border-style": "solid", "position": "relative", "z-index": "100000" });
            Completion_Obj_Show.attr("class", "Completion-guess-list ");
            Completion_Obj_Show.html(html);
            Completion_N = -1;
            Completion_Obj_Show.find("li").unbind("click").click(function () {
                완료_선택됨 ($(this));
           });
            MouseHover($(this));
            Completion_Obj_Show.click(function (e) {
                e.stopPropagation();
            })
            Completion_Obj.click(function (e) {
                Cimpletion_Bind();
               e.stopPropagation();
           });
            $(document).click(function () {
                Completion_Obj_Show.hide();
            });
        }
        //加载
        Completion_Loading();
    };
    //默认配置
    $.Completion.DefaultSetting = {
        Completion_Height: null,
        Completion_Data_Url: null,
        Completion_Obj: null,
        Completion_Obj_Show: null,
        Completion_Bool: false,
        Completion_Count:
        Completion_Type_obj: null,
        Completion_ClickCall: null
    } ;

})(jQuery);

复主代码 代码如下:

body
{
      여백: 0;
    패딩: 0;
    }
.Completion-guess-list ul, li
{
    여백: 0;
    패딩: 0;
    목록 스타일: 없음;
}
.Completion-guess-list
{
    오버플로: 자동;
    글꼴 크기: 12px;
    줄 높이: 180%;
    배경: #fff ;
}
.Completion-guess-list a
{
    색상: #555;
    텍스트 장식: 없음;
    디스플레이: 블록;
    패딩: 1px 6px ;
    오버플로: 숨겨진;
    공백: nowrap;
    글꼴 패밀리:Verdana,arial;
}
.Completion-guess-list a .c-total{float:right ;color:green;}
.Completion-guess-list a:hover,.Completion-guess-list a.Completion-guess-list-hover
{
    배경: #3399ff;
    color : #fff;
}
.Completion-guess-list a:hoverspan.c-total,.Completion-guess-list a.Completion-guess-list-hoverspan.c-total{color:# fff;}
.완성-추측-목록 .c-hover{font-weight:700;}

复主代码 代码如下:

$.Completion({ Completion_Obj: $("#Input_Html "), Completion_Data_Url: "/CompletionHandler.ashx", Completion_Height: "auto", Completion_Obj_Show: $("#show"), Completion_Bool: true, Completion_Type_obj: $("#Type"), Completion_ClickCall: function () { 경고( 1); }, 완성_길이: 0 });
관련 라벨：
自动补全
원천：php.cn
이전 기사：jQuery 슬라이딩 메소드 SlideDown은 요소를 아래쪽으로 슬라이드합니다_jquery 다음 기사：javascript_javascript 스킬에서 중국어와 영어가 혼합된 문자열의 길이를 얻는 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
PX가 REM 오류로 자동 변환  <style>html {   글꼴 크기: calc(100vw / 3.75);      }body {    글꼴 크기: 0.16rem;      }&l...
에서 2024-04-16 09:34:16
0
0
4687
3단계 계층구조의 맞춤 분류를 사용하여 우커머스 관련 상품을 선택하세요. 나는 "스포츠"라는 사용자 정의 분류를 가진 wooCommerce 상점을 가지고 있습니다. 분류에는 부모, 어린이, 어린이의 세 가지 수준이 있...
에서 2024-04-06 20:05:30
0
1
544
Android의 React-Native에서 상태 업데이트가 작동하지 않습니다. 스와이프할 수 있는 가로 갤러리에 이미지 쌍이 있는 코드가 있습니다. 이제 두 이미지의 위쪽 부분을 클릭하면 이미지가 꺼지므로 isImage2Active를 상태로...
에서 2024-04-06 16:54:10
0
1
410
Gmail 및 XOAUTH2를 사용하는 PHPMailer: 현재 새로 고침 토큰이 만료되면 자동으로 새 새로 고침 토큰을 얻는 방법은 무엇입니까? XOAUTH2(PHPMailerWiki)와 함께 Gmail을 사용하는 것과 GmailXOAUTH2와 함께 PHPMailer를 사용하여 이메일을 보내는 방법이 걱정...
에서 2024-04-06 10:14:45
0
1
373
강제 새로 고침은 Next.js에서 정의되지 않은 경로 또는 오류 페이지에 액세스한 결과입니다. 정의되지 않은 경로 또는 오류 페이지에 액세스하면 Next.js가 강제 새로 고침을 수행하여 내 컨텍스트가 기본 상태로 돌아가게 됩니다(즉, userProfile...
에서 2024-04-05 08:32:46
0
1
400
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿