키 코드는 다음과 같습니다.
$ ( '#sale'). typeahead ({ajax : {url : '@url.action ( "../ contract/getsale"', // timeout : 300, method : 'post', 'post', triggerlength : 1, null, preprocess : 함수 (결과) {return result;}}, "vale", val : "Idem : 10, 항목 : 10, 항목 : 10, 항목 : {$ ( "#salesid"). val (val);}});이 Typeahead 자동 완료는 Bootstrap에서 일반적으로 사용되는 Typeahead.js가 아닙니다. 아래는 typeahead.js 코드입니다 (bootstrap3-typeahead.js가 있으면 더 좋습니다)
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Bootstrap Typeahead 플러그인 // http://twitter.github.com/bootstrap/javaScript.html#typeahead/////20, // jQuery 1.7+// Twitter bootstrap 2.0+/// ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- (element, options) {this. $ element = $ (요소); this.options = $ .Extend (true, {{}, $ .fn.typeahead.Defaults, 옵션); this. $ menu = $ (this.options.menu) .appendto ( 'body'); this.shown = false; // 메소드 this.eventsupportes = this.events | this.eventsupported; this.grepper = this.options.grepper || this.grepper; this.highlighter = this.options.highlighter || this.highlighter; this.lookup = this.options.lookup || this.lookup; this.matcher = this.options.matcher || this.matcher; this.render = this.options.render || this.render; this.select = this.options.select || this.sorter = this.options.sorter || this.sorter; this.source = this.options.source || this.source; if (! this.source.length) {var ajax = this.options.ajax; if (typeof ajax === 'string') {this.ajax = $ .extend ({}, $ .fn.typeahead.defaults.ajax, {url : ajax}); $ .extend ({}, $ .fn.typeahead.defaults.ajax, ajax);} if (! this.ajax.url) {this.ajax = null;}} this.listen ();} typeahead.prototype = {constructor : typeahead, // =========================================================================== =========================================================================== utils /////////////6=============================================================================== =========================================================================== = 일반 ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 1.8 // eventSupported : function (eventName) {var issupported = (이 eventName in this. $ 요소); if (! issupported) {this. $ element.setAttribute (eventName, 'return;'); issupported = this. issupported;}, // ============================================================================== ============================================================================= Ajax /// ===================================================================== =========================================================================== = 일반 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- that;} // query는 change that that.query = query; // setif (that.ajax.timerid) {cleartimeout (that.ajax.timerid); that.ajax.timerid = null;} if (! query || query.length <that.ajax.trigerlength) {// progressif (that.ajax.xhr) {that.ajax.xhr.abort (); that.ajax.xhr = null; that.ajaxtoggleloadclass (false);} reture that.hown? that.hide () : the;} // 쿼리는 보내기에 좋고, 타이머를 설정하고, timerth.ajax.timerid = settimeout (function () {$ .proxy (that.ajaxexecute (query), that)}, ajax.timeout); that;},//----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- (query) {this.ajaxtoggleloadclass (true); // 이미 진행중인 경우 마지막 호출을 취소하십시오. this.ajax.predispatch (query) : {query : query}; var jajax = (this.ajax.method === "post")? $ .post : $ .get; this.ajax.xhr = jajax (this.ajax.url, params, $ .proxy (this.ajaxlookup, this)); this.ajax.timerid = null;},//---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- retreivalthis.ajax.data = data; items = this.grepper (this.ajax.data); if (! imps ||! items.length) {this.hown? this.hide () : this;} this.ajax.xhr = null; render.render (items.slice (0, this.options.items)).show();},//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------. (! this.ajax.loadingclass) 반환; this. $ element.toggleclass (this.ajax.loadingclass, enable);}, // =========================================================================================================================== =================================================================================================== 데이터 조작 ///////////////6===================================================== =========================================================================== = 일반 -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 그. $ element.val (); if (! that.query) {return that.hown? that.hide () : that;} items = that.grepper (that.source); if (! imps ||! items.length) {return that.shown? that.hide () : that;} reture that.render (items.slice (0, that.options.items)).show();}},//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------. that = this, If (data && data.length &&! data [0] .HasOwnProperty (that.options.display)) {return null;} item = $ .grep (data, function (item) {return that.matcher (item [that.options.display], 항목); return); this.sorter(items);},//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ~item.toLowerCase().indexOf(this.query.toLowerCase());},//---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- {beginSwith.push (item);} else if (~ item [the it that.options.display] .indexof (this.query)) {cassensitive.push (item);} else {caseInsensitive.push (항목);}} returnswith.concat (caseSensive, CASEINSENSTIVE);}, // ====================================================================================== ============================================================================================= 돔 조작 ///////////////6===================================================== =========================================================================== =============================================================//------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- this. $ 요소 [0] .offSetheight}); this. $ menu.css ({top : pos.top + pos.height, left : pos.left}); this. $ menu.show (); this.shown = true; return this;},//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Highlights 결과 (ES) 결과 내에서 (ES) // HighLighter : function (item) {var query = this.query.replace (/../-/ 9] {}()*+?. '</strong>';});},//----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- list//render: function (items) {var that = that; items = $ (항목) .map (function (i, item) {i = $ (that.options.item) .attr ( 'data-value', item [that.options.val]; i.find ( 'a'). html (that.highligher (ited [that.options.display], return); i [0];}); items.first (). addClass ( 'active'); this. $ menu.html (items); return 이것;},//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- this.hide();},//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 이전 결과를 선택하십시오 : // prev : function (event) {var active = this. $ menu.find.find ( '. active'). removeClass ( 'active'); var prev = active.prev (); if (! prev.length) {prev = 이. $ menu.find ( 'li'). last ();} prev.addclass ( 'active');}, // =========================================================================== ============================================================================ ======================================================================== //////4 이벤트 /// ========================================================== =========================================================================== ================================================ // ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------. ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 이것)); if (this.eventsupported ( 'keydown')) {this. $ element.on ( 'keydown', $ .proxy (this.keypress, this));} else {this. $ element.on ( 'keypress', $ .proxy (this.keypress, this)); $.proxy(this.mouseenter, this));},//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- being up up (e) {e.StopPropagation (); e.preventDefault (); switch (e.keyCode) {case 40 : // 아래쪽 화살표 38 : // up arrowbreak; case 9 : // tabcase 13 : // enterif (! this.shown)} this.select (); break; break; break; escapethis.hide();break;default:this.lookup();}},//--------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 눌림 // keypress : function (e) {e.stopPropagation (); if (! this.hown) {return;} switch (e.keyCode) {case 9 : // 탭 케이스 13 : // enthcase 27 : // escapee.preventDefault (); break; case 38 : // up Arrowe.preventDefault (); prevev (); arrowe.preventDefault();this.next();break;}},//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 결과 목록을 클릭하는 핸들 // 클릭 : 기능 (e) {e.stopPropagation();e.preventDefault();this.select();},//---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- {this.$menu.find('.active').removeClass('active');$(e.currentTarget).addClass('active');}}//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ {$ this.data ( 'typeahead', (data = new Typeahead (this, 옵션));} if (typeof 옵션 === 'String') {data[option]();}});}//---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------. }, ajax : {url : null, timeout : 300, method : 'post', triggerlength : 3, loadingclass : null, displayfield : null, predispatch : null, preprocess : null}} $. fn.typeahead.constructor = Typeahead;//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- $ ( 'body'). off ( '. data-api') // 추가 정보 : https://github.com/twitter/bootstrap/tree/mas ($ this.data ( 'typeahead')) {return;} e.preventDefault (); $ this.typeahead ($ this.data ());});} (window.jquery);위의 것은 편집기가 소개 한 부트 스트랩 타입 헤드 자동 완성 플러그인 예제 코드입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!