重要なコードは次のとおりです。
$（ '＃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のウェブサイトへのご支援ありがとうございます！