El código clave es el siguiente:
$ ('#Sale'). Typeahead ({ajax: {url: '@url.action ("../ contract/getSale")', // timeout: 300, método: 'post', thriggerLength: 1, loadingclass: null, preprocess: function (resultado) {return resultado;}}, visualización: "valor", val: "Id", items: 10, ítem, ítem (resultado) {return Result;}}, visualización: "valor", val: "Id", items: 10, ítem, ítem (resultado) {return Result;}}, Display: "Value", Val: "Id", items: 10, ítem, ítems (resultado) {Resultado de retorno; {$ ("#Salesid"). Val (val);}});Esta finalización automática de Typeahead no es el typeahead.js comúnmente usado en bootstrap. A continuación se muestra el código typeahead.js (es mejor si hay bootstrap3-typeeahead.js)
// --------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- Bootstrap Typeahead Plugin // http://twitter.github.com/bootstrap/javascript.html#typeeahead/////////////////////////////////////////////1 requisitos // --------------- // jquery 1.7+// twitter bootstrap 2.0+/// ------------------------------------------------------------------------------------------------------------------------------------------------------- {this. $ element = $ (elemento); this.options = $ .extend (true, {}, $ .fn.typeeahead.defaults, options); this. $ menu = $ (this.options.menu) .appendTo ('body'); this.shown = false; // El método anula este.eventsupported = this.options.eventsupported ||| this.eventsupported; this.grepper = this.options.grepper || this.gepper; 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.typeeahead.defaults.AJAX, {url: ajax});} else {this.aJax $ .fn.typeeahead.defaults.ajax, ajax);} if (! this.ajax.url) {this.ajax = null;}} this.listen ();} typeahead.prototype = {constructor: Typeahead, // ========================================================================= ========================================================================= /// Utils //// ========================================================= ====================================================================== ======================================/---------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------- 1.8 // eventsupported: function (eventName) {var issupported = (eventName in this. $ Element); if (! Ispported) {this. $ Element.setTribute (eventName, 'return;'); ispported = typeOf thy. $ Element [eventname] === 'function';} return emitido;}, // ============================================================================================= ========================================================================= /// Ajax //// ========================================================== ====================================================================== ==========================/------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- que;} // consulta cambiando that.query = query; // Cancelar el último temporizador si setif (que.AJAX.TIMERID) {ClearTimeOut (que.AJAX.TIMERID); que.AJAX.TIMERID = null;} if (! Query || Query.length <that.AJAX.TRIGGERLIGENT) {// Cancele la devolución de llamada de Ajax si está en progreso (que.AJAX.XHR) {que.AJAX.XHR.ABORT (); que.AJAX.XHR = NULL; que.AJAXTOGGLELOAdClass (falso);} return that.shown? that.hide (): que;} // consulta es bueno para enviar, establece un timerTh.AJAX.timerId = setTimeOut (function () {$. that;},//----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- (query) {this.AJAXTOGGLELOAdClass (true); // Cancelar la última llamada si ya está en progreso (this.AJAX.XHR) this.ajax.xhr. this.ajax.predispatch (consulta): {Query: Query}; var jajax = (this.ajax.method === "post")? $ .post: $ .get; this.ajax.xhr = jajax (this.ajax.url, params, $ .proxy (this.AJAXLOOVEP, this)); this.ajax.timerid = nulo;},//---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------- retreivalThis.AJAX.DATA = data; items = this.grepper (this.ajax.data); if (! elementos ||! items.length) {return this.shown? this.hide (): this;} this.ajax.xhr = null; devuelve this.render (items.slice (0, this.options.items)). show ();}, // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------- (! this.ajax.loadingclass) return; this. $ element.toggleclass (this.ajax.loadingclass, enable);},//=========================================================================================== =============================================================================================================== //// Datos Manipulación //// ==================================================== =================================================================== ==========================================================/---------------------------------------------------------------------------- --------------------------------------------------------------------------- Eso. that.hide (): que;} elementos = that.grepper (that.source); if (! elementos ||! items.length) {return that.shown? que.hide (): que;} devuelve que.render (items.slice (0, eso.options.items)). show ();}}, // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------- que = this, elementos; if (data && data.length &&! data [0] .hasownproperty (that.options.display)) {return null;} elementos = $ .grep (data, function (item) {return that.matcher (item [that.options.display], elemento);}); return this.sorter(items);},//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ~ item.tolowercase (). indexOf (this.Query.tolowercase ());}, // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------- {beginswith.push (item);} else if (~ item [that.options.display] .indexof (this.Query)) {cassSensitive.push (item);} else {caseInsensitive.push (item);}} returnwith.concat (casos sensibles, sensibles, caseInsensitive);}, // =============================================================== ================================================================================ /// Domina Manipulación //// ==================================================== =================================================================== ============================================================= // ------------------------------------------------------- --------------------------------------------------------------------------- this. $ elemento [0] .Offsetheight}); this. $ menú.css ({top: pos.top + pos.height, izquierda: pos.left}); this. $ menu.show (); this.shown = true; return; return; return; this;},//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Highlights el partido (es) dentro de los resultados // resaltador: function (item) {var query = this.query.replace (/que-/-/§efonty + Match + '</strong>';});}, // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- list // render: function (elementos) {var that = this; items = $ (elementos) .map (function (i, item) {i = $ (that.options.item) .attr ('data-value', item [that.options.val]); i.find ('a'). html (que.highlighter (item [that.options.display], element); i [0];}); elements.first (). addClass ('activo'); this. $ menú.html (elementos); return este;},//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------- this.hide ();}, // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ --------------------------------------------------------------------------------------------------- Selecciona el resultado anterior // prev: function (event) {var activo = this. $ Menú.find ('. Activo'). RemoveClass ('activo'); var prev = activo.prev (); if (! Prev.length) {prev = this.$menu.find('li').last();}prev.addClass('active');},//========================================================================= ===================================================================== =============================================================== /// Eventos //// ========================================================== ====================================================================== ===================================== // -------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------- este)); if (this.eventsupported ('keydown')) {this. $ element.on ('keydown', $ .proxy (this.keyPress, this));} else {this. $ element.on ('keyPress', $ .proxy (this.keypress, this);} this. $ menú 'li', $ .proxy (this.rouseenter, esto));}, // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- {E.StopPropagation (); E.PreventDefault (); Switch (E.KeyCode) {Case 40: // Down ArrowCase 38: // Up ArrowBreak; Case 9: // Tabcase 13: // Enterif (! this.shown) {return;} this.select (); break; case 27: // escapethis.hide (); break; predeterminado: this.lookup ();}}, // ----------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------- siendo presionado // keyPress: function (e) {e.stoppropagation (); if (! this.shown) {return;} switch (E.KeyCode) {case 9: // tabcase 13: // ingrese 27: // escape.preventDefault (); break; case 38: // uprowe.preventDefault (); this.prevev (); arrowe.preventDefault (); this.next (); break;}}, // ------------------------------------------- ----------------------------------------------------------------------------------------------------------- Maneja haciendo clic en la lista de resultados // Haga clic: Función (E) {e.stopPropagation();e.preventDefault();this.select();},//---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------- {this. $ menú.find ('. activo'). RemoveClass ('activo'); $ (e.currentTarget) .addclass ('activo');}} // ----------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- {$ this.data ('typeahead', (data = new typeahead (this, opciones)));} if (typeof option === 'string') {Data [opción] ();}});} // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------- }, Ajax: {url: null, tiempo de espera: 300, método: 'post', TriggerLength: 3, LoadingClass: null, displayfield: null, prediscoatch: null, preprocess: null}} $. fn.typeeahead.constructor = Typeahead; // ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- $ ('Body'). Off ('. Data-APi') // Más información aquí: https://github.com/twitter/bootstrap/tree/master/js//$(function () {$ ('body'). on ('focus.typehead.data-api', '[dataProvide = "typeahead"]', function (e) ($ this.data ('typeahead')) {return;} e.preventDefault (); $ this.typeAhead ($ this.data ());})});} (window.jquery);Lo anterior es el código de ejemplo de complemento de finalización automática de Bootstrap Typeahead introducido por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!