실제 프로젝트에서는 관련 기능을 구현하기 위해 다른 사람들이 작성한 플러그인을 사용하는 것이 가장 좋습니다. 그러나 시간과 비용을 절약하기 위해 일부 프로젝트는 더 시급하고 직접 글을 쓸 시간이 충분하지 않습니다. 글을 쓰더라도 여전히 많은 시간을 디버깅하는 데 소요됩니다. 그러나 학습을 위해 여가 시간을 사용하여 직접 글을 쓰고, 네이티브 JS를 읽고, 자신의 아이디어에 따라 플러그인을 만들어 레벨을 향상시킬 수 있습니다.
Autotemplete에 대해 말하면 많은 사람들이 그것을 사용했습니다. Autotemplete.js를 참조한 다음 입력 상자에 값을 입력 할 때 프롬프트 드롭 다운 옵션을 구현할 수 있습니다. Baidu 검색 창의 신속한 기능과 유사합니다. 자신의 아이디어에 대해 이야기합시다.
입력 이벤트를 입력 상자에 추가하십시오
1. 입력 이벤트의 호환성 코드는 다음과 같습니다.
addEvt : function (ele, evt, fn) {if (document.addeventListener) {ele.adeventListener (evt, fn, false); } else if (docut } else {ele [ 'on' + (evt == "input"? "PropertyChange": evt)] = fn; }}입력 이벤트는 다른 이벤트와 다릅니다. IE의 하위 버전은 입력 이벤트를 지원하지 않으며 PropertyChange 이벤트 만 사용할 수 있습니다. IE 및 W3C 표준 브라우저의 더 높은 버전은 입력 이벤트를 지원합니다.
2. 입력 이벤트가 트리거되면 데이터 가져옵니다
여기에는 두 가지 형태의 데이터가 있으며, 하나는 직접 세트 객체 배열이고, 다른 하나는 데이터를 반환하기위한 ajax 요청입니다.
현재 Ajax 요청 기능이 필요하며 여기에서 GET 요청이 작성됩니다.
get : function (url, paraobj, fn, timeout) {var xhr = null; try {//// Firefox, Chrom if (wind } ///// IF (wind }} catch (e) {// todo는 예외 xhr = new ActiveXobject ( 'microsoft.xmlhttp')를 처리합니다. } xhr.onreadyStateChange = function () {if (this.readyState == 4 && this.status == 200) {fn.call (this, this, this.responsetext); } else {settimeout (function () {xhr.abort ();}, timeout); }}; varast = ''; parastr += "?"; for (paraobj의 var prop) {parast + = prop + "=" + paraobj [prop] + "&"; } xhr.open ( 'get', parasts! = "?"? (url + parast) : url, true); xhr.send (); }3. AJAX 요청이 성공하고 데이터가 있으면 드롭 다운 상자를 만들고 드롭 다운 상자에 옵션을 추가하십시오 //// 드롭 다운 DIV 생성
드롭 다운 박스 코드 만들기 :
CreateShowDiv : function () {/// 풀다운 div가 이미 존재하면 var parentnode = this.autoelement.parentNode || this.autolement.parentElement; var childnodes = parentnode.childnodes; var showdiv = document.getElementById (this.config.showdivid); if (showdiv) {parentnode.removechild (showdiv); } // 풀다운 div div var div = document.createElement ( 'div') 만들기; div.id = this.config.showdivid; // 드롭 다운 DIV 스타일을 설정합니다. var style = this.config.style || {너비 : '200px', 높이 : '자동', Back } this.showdiv = div; }옵션 코드 추가 :
AppendChild : function (data) {var self = this; var data = data; var fragment = document.createdOcumentFragment (); for (var i = 0; i <data.length; i ++) {var obj = data [i]; var child = document.createelement ( 'div'); child.style.width = self.showdiv.style.width; child.style.border = '1px'; child.style.borderstyle = 'solid'; child.style.bordertopcolor = '화이트'; child.setattribute ( 'key', obj [self.config.valuefiled]); child.innerhtml = obj [self.config.textFiled]; Fragment.AppendChild (어린이); } self.showdiv.appendChild (조각); self.util.insertafter (self.showdiv, self.autoelement); // 드롭 다운 상자 self.util.addevt에 대한 클릭 이벤트 추가 (self.showdiv, 'click', function (e) {var evt = e || window.event; var target = evt.srcelement || evt.target; var key = target.getAttribute ( "key"); var val.innerhtml; self.aUlement. self.config.select.call (self, key, val); }위는 몇 가지 주요 아이디어입니다. 이제 이러한 코드를 객체에 캡슐화하고 플러그인으로 만드는 방법을 살펴 보겠습니다. 현재 우리는 익명의 폐쇄를 사용합니다.
(function (win) {var autocomplete = function () {this.init.apply (this, arguments);} autocomplete.prototype = {/// 관련 작업 코드 추가 init : {}, // 초기화 매개 변수 렌더링 : {}, createshowdiv : {}, // drop-down div appendchild : {}, ////// //// 드롭 다운 상자 닫기 /////// 도구 객체, 이벤트, 요청 및 함수는 DOM 노드 작업 Util : {addevt : {{}, // add insertAfter : {}, // add a add get get : {} ///// ajax get}} win.autoc temprete = function (paraobj) < autocomplete (paraobj) .render ();기본 코드가 추가되었으며 특정 구현 코드를 표시합니다.
(function (win) {var autocomplete = function () {this.init.apply (this, arguments);} autocomplete.prototype = {init : function () {var args = array.slice.call (arguments); if (args && args.length> 0) {var configs = var getType = it.prot. (config && gettype.call (config) == "[object 객체]") {// this.config = config || DROPDOIN DIC URL : // ajax는 '이름'을 요청했습니다 getElementById (self.config.id); autoelment = if (autoelment) {self.util.addevt, function () {if (autolement.value) {/// welf.config.datat. = {}; paraobj [self.config.paraname] = autolement.util.get (self.config.url {self.createshowdiv (); self.appendchild ( '' + data + '); (! self.config.data) {self.createShowdiv (self.config.data); function (/// parentnode)가 이미 존재하는 경우 var. // div div. Div.Style [Prop]} DROPDOIN DIV APPENDCHILD를 추가합니다 child.width = self.style.border = '1px'; = self.config.textFiled. evt.srcelement || (this.showdiv) {this.showdiv.style.display = 'none'}, util addevt : function (ele, evt, fn) {if (document.addeventlistener) {ele.addeventListener (evt, fn, false); ele.attachevent ( 'on' + (evt == "input"? "PropertyChange", fn) {ele [evt == "input"? "propertychange": evt}}, // ed a intarteNode. 대상 (wind } readystatechange = {this.responsext (this.responsextext) {xhr.abort (); {prop + "=" + paraobj "} xhr.open (get ', uRl + parast) : xhr.send (}});아래는 사용 된 코드입니다
페이지 호출
window.onload = function () {autocomplete ({id : 'txttest', // 컨트롤 ID URL : '/home/test4', // data paraname : 'name', 'namefiled :'name ', // 표시된 텍스트의 속성 이름 :'id ', // 값의 속성 이름 : // style 설정 : // 스타일 설정 : // '', // ajax 요청 URL 선택 : function (val, text) {alert (val + '---' + text); }); }배경 코드는 다음과 같습니다. 여기서는 MVC를 사용하고 있습니다.
public jsonresult test4 (문자열 이름) {var list = new List <student> (); list.add (신입생 {id = "1", name = "aaaaa"}); list.add (신입생 {id = "2", name = "aacc"}); list.add (신입생 {id = "3", name = "aabb"}); list.add (신입생 {id = "4", name = "bbcc"}); if (! string.isnullorEmpty (name)) {list = list.where (p => p.name.contains (name)). tolist (); } return JSON (List, JSONREQUESTBEHAVIOR.ALKERGET);}기본 기능 구현 및 호출이 완료되었으므로 처음부터 끝까지 프로세스가 매우 번거 롭습니다. 각 방법은 다른 라이브러리를 참조하지 않고 단계별로 구현되며 각 브라우저의 호환성을 고려해야합니다.
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.