다음과 같이 코드 코드를 복사하십시오.
/*텍스트가 자동으로 ZhouxIang*/
(기능 ($) {
$ .complting = 모금 (설정) {
var opts = $ .extend ({}, $ .completion.defaultsetting, 설정);
//너비
var wompleting_width = null;
//높은
var wompleting_height = null;
// 데이터 소스 (ASHX) 액세스 경로
var wompleting_data_url = null;
// 물체
var wompleting_obj = null;
var wompleting_obj_show = null;
// 객체 거리 왼쪽 거리
var wompleting_obj_marginleft = null;
// 상단에서 객체 거리
var wompleting_obj_margintop = null;
// 객체 높이
var wompletion_obj_height = null;
//분류
var wompleting_count = null;
//
var wompleting_type_obj = null;
//콘텐츠
var wompleting_value = null;
//유형
var wompleting_type = null;
// 유형을 전달할지 여부
var wompleting_book = false;
//세다
var completion_n = 0;
// 다시 입력하고 다시 전화하십시오
var wompleting_clickcall = null;
//짐
함수 완료 _loading () {
// 초기화
init ();
// 빙빙 이벤트
완성 _obj_addevent ();
}
// 초기화
함수 init () {) {
완성_obj_show = opts.completion_obj_show;
// 객체를 얻습니다
완료 _obj = 옵션 _obj;
// 객체의 너비를 가져옵니다
완료 = 완전한 _obj.width ();
// 레이어 디스플레이 높이를 가져옵니다
완료_height = opts.completion_height;
// 액세스 데이터베이스 URL을 가져옵니다
완료 _data_url = opts.completion_data_url;
// 매번 몇 개의 레코드를 쿼리합니까?
완성_count = 옵션.completion_count;
// 객체 높이를 얻습니다
완료 _obj_height = complete_obj.height ();
// 왼쪽 거리를 얻습니다
wally_obj_marginleft = complete_obj.offset ();
// 상단 거리를 얻습니다
womplet_obj_margintop = parseint (completion_obj.offset (). top) + parseint (wempletion_obj_height);
완료 _type_obj = 옵션 _type_obj;
complete_bool = 옵션 _bool;
complete_clickcall = 옵션.completion_clickcall;
}
// 객체에 이벤트를 추가합니다
함수 완료 _obj_addevent () {) {)
완료
스위치 (event.keyCode) {
사례 38 :
부서지다;
사례 40 :
부서지다;
Case 13:
complete_clickCall ();
부서지다;
기본:
// 키 이벤트 지연 작동
cimpletion_bind ();
부서지다;
}
});
완료
스위치 (event.keyCode) {
Case 13:
부서지다;
사례 38 :
if (completion_n == 0) {{
complete_n = (complete_obj_show.find ( "li").
} else if (완료 _n! = 0) {{
complete_n = complete_n -n;
}
// Alert (완료 _n);
wally_obj_show.find ( "li") ( "A");
wally_obj_show.find ( "li").
wally_obj.val (wally_obj_show.find ( "li"). eq (completion_n) .find ( "ul"). text ());
부서지다;
사례 40 :
if (complete_n + 1 <consafting_obj_show.find ( "li").
complete_n = complete_n + 1;
} else if (완료 _n + 1 == wompletion_obj_show.find ( "li").
완료 _n = 0;
}
wally_obj_show.find ( "li") ( "A");
wally_obj.val (wally_obj_show.find ( "li"). eq (completion_n) .find ( "ul"). text ());
wally_obj_show.find ( "li").
부서지다;
기본:
부서지다;
}
});
}
// 바인딩 방법
함수 cimpleting_bind () {
// 유형을 여는지 판단
if (completion_bool) {
complete_type = complete_type_obj.val ();
}
완료_value = complete_obj.val ();
완성_value = complete_value.replace ( "", "");
// 확인을 실행합니다
wompletion_verification (완료 _value);
if (completion_value.length> 1) {{
// 데이터 구조 HTML을 가져옵니다
complete_data_bind ();
} 또 다른 {
완성 _obj_show.hide ();
}
}
//확인하다
함수 완료 _verification (obj) {{
if (obj == "" ""|| obj == null || obj == undefined) {
거짓을 반환합니다.
}
}
// 데이터를 가져 오려면 ajax 요청을 실행합니다
함수 완료 _data_bind () {
$ .ajax ({{
URL : 완료 _data_url,
데이터 : {wompletionValue : wompleting_value, completionCount : wompleting_count, wompletionType : wompleting_type},
유형 : "Post",
데이터 유형 : "JSON",
성공 : 기능 (obj) {
// HTML을 구성합니다
완성 _add_html (obj);
}
});
}
// 선택하다
함수 완료 _select (obj) {
완성_obj.val (obj.find ( "ul"). text ());
완성 _obj_show.hide ();
}
// 구성 컨텐츠
함수 완료 _add_html (obj) {
var data = object_data;
// 확인을 실행합니다
완료 _verification (데이터);
var wompleting_li = "";
if (data! = null && data! = undefined) {
for (var i = 0; i <data.length; i ++) {
// 확인이 비어 있는지 여부
var dr = 데이터 [i];
완료 _verification (dr);
var completionName = Dr. COCETING_NAME;
wemberionName = wompletionName.replace (wompletion_value.toupperCase (), "<span class = 'c-hover'>" + womballion_value.toupperCase () + "</span>");
완료 /ul> </a> </li> "";
}
if (완료 _li! = "") {{
var wompleting_html = "<ul Style = 'List-Style-Type : none;'>" " + wompletion_li +"</ul> "";
완성_obj_html (완료 _html);
} 또 다른 {
완성 _obj_show.hide ();
}
}
}
// 생쥐
함수 마우스 호버 (obj) {
wally_obj_show.find ( "li").
wally_obj_show.find ( "li") ( "A");
완성_obj.val ($ (this) .find ( "ul"). text ());
complete_n = complete_obj_show.find ( "li");
});
}
// 제어에 바인딩합니다
함수 완료 _obj_html (html) {
완성_obj_show.show ();
완료
완료 _obj_show.css ({ "width": 완료 _width + 6, "높이": 완료 _height, "border-width": "1px", "border-color": "#ccc", "border-top-wid"th ": "0px", "국경 스타일": "solid", "위치": "상대", "z-index": "100000"});
완성 _obj_show.attr ( "class", "완료 유수-목록");
완성_obj_show.html (html);
complete_n = -1;
wally_obj_show.find ( "li").
wompletion_Selected ($ (this));
});
Mousehover ($ (this));
완료 _obj_show.click (function (e) {
E.StopPropagation ();
})
완료 _obj.click (function (e) {
cimpletion_bind ();
E.StopPropagation ();
});
$ (docume) .click (function () {
완성 _obj_show.hide ();
});
}
//짐
complete_loading ();
};
// 기본 구성
$ .completion.defaultsetting = {
완료 _height : null,
완료 _data_url : null,
완료 _obj : null,
완료 _obj_show : null,
완료 _bool : 거짓,
complete_count : 10,
완료 _type_obj : null,
complete_clickcall : null
};
}) (jQuery);
다음과 같이 코드 코드를 복사하십시오.
몸
{{
여백 : 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;}
.completion-Guess-List A : 호버, .completion-Guess-List A.Completion-Guess-List-Hover
{{
배경 : #3399ff;
색상 : #fff;
}
.completion-guess-list A : 호버 span.c-total, .completion- guess-list a.completion-guess-lover span.c-total {color : #fff;};}
.completion-guess-list .C-Hover {font-weight : 700;}
다음과 같이 코드 코드를 복사하십시오.
$ .complting ({완료 _obj : $ ( "#input_html"), wompletion_data_url : "/completionhandler.ashx", wompletion_height : "auto", wompletion_obj_show : $ ( "#Show"), 완료 : 완료 : 완료 _type_Obj : $ ( "#"#. type "), complete_clickcall : function () {alert (1);}, complex_length : 0});