Der Schlüsselcode lautet wie folgt:
$('#Sale').typeahead({ajax: {url: '@Url.Action("../Contract/GetSale")',//timeout: 300,method: 'post',triggerLength: 1,loadingClass: null,preProcess: function (result) {return result;}},display: "Value",val: "ID",items: 10,itemSelected: function (item, val, text) {$ ("#SalesID"). Val (val);}});Diese automatische Fertigstellung von TypeAheads ist nicht die in Bootstrap verwendet. Unten finden Sie den Code typeAeAdhead.js (es ist besser, wenn es Bootstrap3-Type-typen.js gibt)
// ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Bootstrap typeAwhead-Plugin // http://twitter.github.com/bootstrap/javascript.html#typeahead////// // ------------------- // jQuery 1.7+// Twitter Bootstrap 2.0+////// ----------------------------------------------------------------------------------------------------------------------------------------------------------------- {this. $ element = $ (element); this.options = $ .extend (true, {}, $ .fn.typeAwhead.defaults, Optionen); this. $ mseu = $ (this.options.Menu) .Andto ('body'); this.eventupported; 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 });} else {this.ajax = $.extend({}, USD. TypeAdhead, // ========================================================================= =========================================================ieben Utils////======================================================= ====================================================================== ==ieben --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 1.8 // Eventupported: function (eventName) {var isupported = (Ereignisname in diesem. $ Element); if (! Issupported) {this. $ Element.setAttribute (Ereignisname, 'return;'); issupported = typeof this. isSupported;},//============================================================ ===========================================================ieben AJAX////======================================================= ====================================================================== ==============================> ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ das;} // query änderte .Query = query; // Last Timer if setif (that.ajax.timerid) {ClearTimeout (that.ajax.timerid); that.ajax.timerid = null;} if (! query || query.length <that.ajax.triggerLength) {// den AJAX -Rückruf abbrechen, wenn in progressif (that.ajax.xhr) {that.ajax.xhr.abort (); that.ajax.xhr = null; that.ajaxtoggleloadClass (false);} return that.shown? that.hide (): das;} // Abfrage ist gut zu senden, setze ein TimerTh.ajax.timerid = setTimeout (function () {$ .proxy (that.ajaxexecute (Abfrage), that)}, that.ajax.timeout); Das;}, // ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- {this.ajaxtoggleloadClass (true); // Abbrechen letzter Anruf, wenn bereits in progressif (this.ajax.xhr) this.ajax.xhr.abort (); var params = this.ajax.prredispatch? this.ajax.prredispatch (Abfrage): {Abfrage: Abfrage}; var Jajax = (this.ajax.method === "post")? $ .post: $ .get; this.ajax.xhr = jajax (this.ajax.url, params, $ .proxy (this.ajaxlookup, this)); this.ajax.timerid = null;}, // -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- retrealthis.ajax.data = data; items = this.grepper (this.ajax.data); if (! items ||! items.length) {return this.shown? this.hide (): this;} this.ajax.xhr = null; return this.render (items.slice (0,, this.options.items)). show ();}, // -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ (! this.ajax.loadingClass) return; this. $ element.toggleClass (this.ajax.loadingClass,, enable);},//============================================================================================ ====================================================================ieben Daten Manipulation //// =================================================== ====================================================================== =====================================ieben ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ that. $ element.val (); if (! this.Query) {return that that.hide (): das;} items = this.grepper (this.source); if (! items ||! items.length) {return that.shown? that.hide (): das;} return that.render (items.slice (0, that.options.items)). show ();}}, // ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- that = this, items; if (Data && data.length &&! data [0] .hasownProperty (that.options.display)) {return null;} items = $ .grep (data, function (item) {return that.matcher (itel [that.options.display], item);}); this.sorter(items);},//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ~ item.tolowerCase (). Indexof (this.Query.tolowerCase ());}, // -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- {beginswith.push (item);} else if (~ item [that.options.display] .indexof (this.Query)) {CaseSensitive.push (item);} else {Caseinsensitiv.push (item);}} return startswith.concat (caseSesibil Caseinemsitiv);}, // ============================================================================== ===========================================================ieben Dom Manipulation //// =================================================== ====================================================================== ================================================ieben ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ this. $ element [0] .offseteight}); this. $ mseu.css ({top: pos.top + pos.height, links: pos.left}); this. $ mseu.show (); Das;},//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Markiert die Übereinstimmung (e) in den Ergebnissen // Highlighter: Funktion (Element) {var query = this.query.replace (/#/-/--/ also $ & '). '<strong>' + Match + '</strong>';}; . i [0];}); items.First (). AddClass ('Active'); this. $ mseu.html (Elemente); Rückgabe Das;},//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- this.hide ();}, // -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Wählt das vorherige Ergebnis aus // prev: function (Ereignis) {var active = this. $ Mseu.find ('. Active'). this. $ mseu.find ('li') ======================================================================= ==============================================ieben Events////====================================================== ====================================================================== ================================ieben --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Das)); if (this.eventsupported ('keydown') {this. $ element.on ('keydown', $ .Proxy (this.keypress, this));} else {this. $ element.on ('keypress', $ .proxy (this.the.the.the. this); $ .Proxy (this.Mouseger, this));}, // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ erhöht // keyUp: function (e) {e.stoppropagation (); e.preventDefault (); switch (e.keycode) {case 40: // down arrowcase 38: // up arrowbreak; case 9: // tabcase 13: // Enterif (! Dies.Shown) {return;} this.select ();; Escapethis.hide (); Break; Standard: this.lookup ();}}, // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Drücken // Tastepress: Funktion (e) {e.Stoppropagation (); if (! this.hown) {return;} Switch (E.KeyCode) {Fall 9: // tabcase 13: // Entercase 27: // Escapee.PreventDefault (); arrowe.preventDefault (); this.next (); break;}}, // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Klicken Sie auf die Ergebnisliste // Klicken Sie: Funktion (e) auf die Ergebnisliste. {E.Stoppropagation (); E.PreventDefault (); this.select ();}, // -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ {this. $ mseu.find ('. Active'). removeclass ('active'); -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- {$ this.data ('typeAeAthead', (data = new typeAehead (this, option));} if (typeof option === 'string')) {Daten [Option] ();}});} // ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- }, ajax: {url: null, timeout: 300, methode: 'post', TriggerLength: 3, ladernklasse: null, displayfield: null, prädispatch: null, preprocess: null}} $. fn.typeahead.constructor = Typeahead;//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- $ ('body'). off ('. data-api') // Weitere Informationen hier: https://github.com/twitter/bootstrap/tree/master/js/$(function () {$ ('Body'). On ('Focus.typeaHea. ($ this.data ('typeAeAt')) {return;} e.preventDefault ();Das obige ist der von der Editor vorgelegte Beispiel-Code für Automatik-Abschluss-Plug-in-Beispielcode für die Automatik-Abschluss von Bootstrap Typeahead. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!