Le code clé est le suivant:
$ ('# Sale'). Typeahead ({ajax: {url: '@ url.action ("../ contrat / getale")', // timeout: 300, méthode: '' post ', TriggerLength: 1, chargementclass: null, prestrocess: function (result) {return result;}}, affichage: "value", val: "id", itemSel {$ ("# SalesId"). Val (val);}});Cette réalisation automatique de Typeahead n'est pas le Typeahead.js couramment utilisé dans Bootstrap. Vous trouverez ci-dessous le code Typeahead.js (c'est mieux s'il y a Bootstrap3-Typeahead.js)
// ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Bootstrap Typeahead Plugin // http://twitter.github.com/bootstrap/javascript.html#typeahead///// exigences // --------------- // jQuery 1.7 + // Twitter Bootstrap 2.0 + /// ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- {this. $ element = $ (élément); this.options = $ .Extend (true, {}, $ .fn.typeahead.defaults, options); this. $ menu = $ (this.options.menu) .appendto ('body'); this.shown = false; // méthode reverrade this.eventsupported = this.options.eventsupported | 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.-plus; 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 ({}, $ .fn.typeahead.defaults.ajax, ajax);} if (! this.ajax.url) {this.ajax = null;}} this.Listen ();} typeahead.prototype = {Constructor: Typeahead, // ===========================================================================. ===============================================================. Utils////======================================================= ==========================================================================. =================================. ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 1.8 // Eventsupported: function (EventName) {var émetteur = (Eventname dans ce. $ Element); if (! Émetteur) {this. $ Element.setAttribute (eventname, 'return;'); émetteur = typeof this. $ Element [Eventname] == 'function';} return émis;}, // =======================================================================. =================================================================. AJAX////======================================================= ==========================================================================. ========================== / ----------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- que;} // query a changéThat.Query = query; // annuler le dernier temporisateur si setif (that.ajax.timerid) {cleartimeout (that.ajax.timerid); that.ajax.timerid = null;} if (! Query || query.length <that.ajax.triggerLlength) {// annule le callback ajax if in progressIF (that.ajax.xhr) {that.ajax.xhr.abort (); that.ajax.xhr = null; that.ajaxtoggleloadclass (false);} return that.shown? that.hide (): que;} // query est bon à envoyer, définissez un timerth.ajax.timerid = setTimeout (function () {$ .proxy (that.ajaxExecute (query), that)}, that.ajax.timeout); return que;}, // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- {this.ajaxtoggleloadclass (true); // annuler le dernier appel si déjà en progressif (this.ajax.xhr) this.ajax.xhr.abort (); var params = this.ajax.predispatch? this.ajax.predispatch (requête): {requête: query}; var jajax = (this.ajax.method === "post")? $ .post: $ .get; this.ajax.xhr = jajax (this.ajax.url, params, $ .proxy (this.ajaxlookup, this)); this.ajax.timerid = nul;},//---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- rereivalthis.ajax.data = data; items = this.grepper (this.ajax.data); if (! items ||! itels.length) {return this.shown? this.hide (): this;} this.ajax.xhr = null; return this.render (itels.slice (0, this.options.items)). show ();}, // ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- (? enable);},//=========================================================================================== ========================================================================================================. Données Manipulation //// ============================================================================. ============================================================================. ===================================================== / ------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- que. $ element.val (); if (! that.query) {return that.shown? that.hide (): that;} items = that.grepper (that.source); if (! items ||! itels.length) {return that.shown? that.hide (): que;} renvoie that.render (items.slice (0, that.options.items)). show ();}}, // ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- this = 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], item);}); return); this.sorter(items);},//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ~ item.tolowercase (). indexof (this.query.tolowercase ());}, // ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------. {BeginSwith.push (item);} else if (~ item [that.options.display] .Indexof (this.query)) {casensitive.push (item);} else {caseInSensitive.push (item);}} return Begaswith.concat (casensitive, CaseInsensitive);}, // ============================================================================. ======================================================================. Dom Manipulation //// ============================================================================. ============================================================================. =====================================================. --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- this. $ element [0] .offsetheight}); this. $ menu.css ({top: pos.top + pos.height, gauche: pos.left}); this. $ menu.show (); this.shown = true; return; this;},//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Highlights La correspondance (es) dans les résultats // haut de gamme: fonction (item) {var query = this.query.replace (/ ·/-/[// // $ & '); return item.replace (new regexp (' ('+ reterry +') ',' ig '), fonction (1 1, correspond à '</strong>';});}, // ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- (items) {var that = this; items = $ (items) .map (function (i, item) {i = $ (that.options.item) .attr ('data-valeur', item [that.options.val]); i.find ('a'). i [0];}); items.first (). addClass ('active'); this. $ menu.html (items); return ce;},//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- this.hide ();}, // ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Sélectionne le résultat précédent // prev: function (event) {var active = this. $ Menu.find ('. Active'). Reposerclass ('active'); var prev = active.prev (); if (! Prev.length) {prev = this.$menu.find('li').last();}prev.addClass('active');},//========================================================================= ===============================================================================. ============================================================================. Événements //// ================================================================================================================================================================= ==========================================================================. =================================. ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ce)); if (this.eventsupported ('keydown')) {this. $ element.on ('keydown', $ .proxy (this.keypress, this));} else {this. $ element.on ('keypress', $ .proxy (this.keypress, this);} this. $ menu.on ('click',. this)). sur ('muouseenter', 'li', $ .proxy (this.mouseenter, ce)));}, // --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- {e.stoppropagation (); e.PreventDefault (); Switch (e.KeyCode) {cas 40: // down arrowcase 38: // up arrowbreak; cas 9: // tabcase 13: // entertif (! this.shown) {return;} this.select (); break; case 27: // EscapEtHis.Hide (); Break; par défaut: this.lookup ();}}, // --------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- être enfoncé // keypress: function (e) {e.stoppropagation (); if (! this.shown) {return;} switch (e.KeyCode) {cas 9: // tabcase 13: // enterase 27: // Escapee.PreventDefault (); cas Break 38: // up arrowe.preventDefault (); this.Prev (). Arrowe.PreventDefault (); this.next (); Break;}}, // --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Points à cliquer sur la liste des résultats // Cliquez sur: fonction (e) gens --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- {this. $ menu.find ('. active'). reposerlass ('active'); $ (e.currentTarget) .AddClass ('active');}} // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------. {$ this.data ('typehead', (data = new Typeahead (this, options)));} if (typeof option === 'String') {data[option]();}});}//---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- }, ajax: {url: null, timeout: 300, méthode: 'post', TriggerLength: 3, chargingclass: null, displayfield: null, predispatch: null, preprocess: null}} $. fn.typeahead.constructor = Typeahead;//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- $ ('body'). off ('. data-api') // Plus d'informations ici: https://github.com/twitter/bootstrap/tree/master/js//$(function () {$ ('body'). On ('focus.typeahead.data-api', '[data-provide = "typeahead"]', fonction (e) {var $) ($ this.data ('typeahead')) {return;} e.preventDefault (); $ this.typeAhead ($ this.data ());})});} (window.jquery);Ce qui précède est le code de plug-in Bootstrap Typeahead Automatic EXEMPTION CODE INTORTÉ PAR L'ÉDITEUR. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!