重要なコードは次のとおりです。
$( '#sale')。typeahead({ajax:{url: '@url.action( "../ contract/getsale")'、//タイムアウト:300、メソッド: 'post'、triggerlength:1、loadingclass:null、preprocess:function(result){return result;}} {$( "#salesid")。val(val);}});このTypeAheadの自動完成は、Bootstrapで一般的に使用されているTypeaHead.jsではありません。以下はtypeahead.jsコードです(bootstrap3-typeahead.jsがある場合はより良いです)
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Bootstrap Typeaheadプラグイン// http://twitter.github.com/bootstrap/javascript.html#typeahead/// ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- (element, options) {this。$ element = $(element); this.options = $ .extend(true、{}、$ .fn.typeahead.defaults、options); this。$ menu = $(this.options.menu).appendto( 'body'); this.shown = false; //メソッドは、Eventesededevented = Evented evented evented eventesed eventesed = eeventesed eventesed eventesed eventesed = eeventesed eventesed eventesed eventesed eventes 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); $ .fn.typeahead.defaults.ajax、ajax);} if(!this.ajax.url){this.ajax = null;}} this.listen();} typeahead.prototype = {constructor: typeeade、// =============================================================== ================================================================ /// utils /// ============================================================================ ============================================================================== ===================================== ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 1.8 // eventSupported:function(eventname){var issupported =(this。$ element); if(!supported){this。$ element.setattribute(eventname、 'return;'); supported = typeof this。 ISSUPPORTED;}、// ============================================================= ================================================================ ajax /// ======================================================== ============================================================================== ============================ ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- that;} // query chander that.query = query; // setif(that.ajax.timerid){cleartimeout(that.ajax.timerid); that.ajax.timerid = null;} if(!query || query.length <that.ajax.triggerlength){// ajaxコールバックをキャンセルIf in Progressif(that.ajax.xhr){that.ajax.xhr.abort(); that.ajax.xhr = null; that.ajaxtoggleloadclass(false);} return that.shown? that.hide():that;} // queryは送信に適しています。timerth.ajax.timerid= setimeout(function(){$ .proxy(that.ajaxexecute(query)、that)}、that.ajax.timeout); return return that;},//----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- (query) {this.ajaxtoggleloadclass(true); //既に進行中の場合の最後の呼び出し(this.ajax.xhr)this.ajax.xhr.abort(); var params = this.ajax.predispatch? 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(!item ||!items.length){return this.shown? this.hide():this;} this.ajax.xhr = null; return this.render(items.slice(0、 this.options.items)))) -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- (!this.ajax.loadingclass)return; this。$ element.toggleclass(this.ajax.loadingclass、 enable);}、// ================================================================================= ======================================================================================================================================= データ操作/// =============================================================== ============================================================================= =================================================== -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- that。$ element.val(); if(!that.query){return that.shown? that.hide():that;} items = that.grepper(that.source); if(!item ||!items.length){return that.shown? that.hide():that;} return that.render(items.slice(0、 that.options.items))) ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ that = this、items; if(data && data.length &&!data [0] .hasownproperty(that.options.display)){return null;} items = $ .grep(data、function(item){return that.matcher(item [that.options.display]、項目);}); this.sorter(items);},//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ~item.toLowerCase().indexOf(this.query.toLowerCase());},//---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- {beginswith.push(item);} else if(〜item [that.options.display] .indexof(this.query)){caseensive.push(item);} else {caseinsensitive.push(item);}} return begin.swith.concat(casesensitive、 caseinsensive);}、// ========================================================================================= ================================================================================== = dom操作/// =============================================================== ============================================================================= ======================================================== // --------------------------------------------------------------------------------------------- - -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- this。$ element [0] .offseeth}); this。$ menu.css({top:pos.top + pos.height、left:pos.left}); this。$ menu.show(); this.shown = true; return これ;}、// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -結果内の一致を強調表示//ハイライター:function(item){var query = this.query.replace(/query.replace(/] replace {} '<strong>' +マッチ + '</strong>';});},//----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- list//render: function (items){var that = this; items = $(items).map(function(i、item){i = $(that.options.item).attr( 'data-value'、item [that.options.val]); i.find( 'a')。 i [0];}); items.first()。addclass( 'active'); this。$ menu.html(item); returnこれ;}、// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- this.hide();},//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------前の結果を選択します// prev:function(event){var active = this。$ menu.find( '。active')。removeclass( 'active'); var = active.prev(); if(!prev.length){prev = this。$ menu.find( 'li')。last();} prev.addclass( 'active');}、// ====================================================================================== ============================================================================ ======================================================= ///イベント/// ===================================================================== ============================================================================== ==================================== -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------これ)); if(this.eventsupported( 'keydown'))){this。$ element.on( 'keydown'、$ .proxy(this.Keypress、this));}これ))。 this));},//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- being raised up//keyup: function (e) {e.StopPropagation(); E.PreventDefault(); switch(e.keycode){case 40:// down arrowcase 38:/up arrowbreak; case 9:// tabcase 13:// enterif(!this.shown){return;} this.select(); case 27:////// escapethis.hide();break;default:this.lookup();}},//--------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- // keypress:function(e){e.stoppropagation(); if(!this.shown){return;} switch(e.keycode){case 9:// tabcase 27:// escapee.preventdefault(); break; case 38:// arrowe.preventDefault();this.next();break;}},//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------結果リストをクリックするハンドル//クリック:function(e) {e.stopPropagation();e.preventDefault();this.select();},//---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- {this.$menu.find('.active').removeClass('active');$(e.currentTarget).addClass('active');}}//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ {$ this.data( 'typeahead'、(data = new Typeahead(this、options));} if(typeof option === 'string') {data[option]();}});}//---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- }、ajax:{url:null、タイムアウト:300、メソッド: 'post'、triggerlength:3、loadingclass:null、displayfield:null、null、predispatch:null、preprocess:null}} $。fn.typeahead.constuctor= Typeahead; $( 'body')。off('。data-api ')//詳細はこちら:https://github.com/twitter/bootstrap/tree/master/js/punt(function(){$(' body ')。 $(this); if($ this.data( 'typeahead')){return;} e.preventdefault(); $ this.typeahead($ this.data());})});}(window.jquery);上記は、編集者が紹介したブートストラップTypeahead Automatic Compleatic Plug-inプラグインの例コードです。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます!