The key code is as follows:
$('#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);}});This typeahead automatic completion is not the typeahead.js commonly used in bootstrap. Below is the typeahead.js code (it's better if there is bootstrap3-typeahead.js)
// ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ Bootstrap Typeahead Plugin// http://twitter.github.com/bootstrap/javascript.html#typeahead///// Requirements// ---------------// jQuery 1.7+// Twitter Bootstrap 2.0+/// ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- (element, options) {this.$element = $(element);this.options = $.extend(true, {}, $.fn.typeahead.defaults, options);this.$menu = $(this.options.menu).appendTo('body');this.shown = false;// Method overrides 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.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({}, $.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 isSupported = (eventName in this.$element);if (!isSupported) {this.$element.setAttribute(eventName, 'return;');isSupported = typeof this.$element[eventName] === 'function';}return isSupported;},//=====================================================================================================================================/// AJAX////=================================================================================================================================================/--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- that;}// Query changedthat.query = query;// Cancel last timer if setif (that.ajax.timerId) {clearTimeout(that.ajax.timerId); that.ajax.timerId = null;}if (!query || query.length < that.ajax.triggerLength) {// Cancel the ajax callback if in progressif (that.ajax.xhr) {that.ajax.xhr.abort(); that.ajax.xhr = null;that.ajaxToggleLoadClass(false);}return that.shown ? that.hide() : that;}// Query is good to send, set a timerth.ajax.timerId = setTimeout(function () {$.proxy(that.ajaxExecute(query), that)}, that.ajax.timeout);return that;},//----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- (query) {this.ajaxToggleLoadClass(true);// Cancel last call if already in progressif (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 (!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);},//===============================================================================================================================================================================================/// Data manipulation////===========================================================================================================================================================================/-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- that.$element.val();if (!that.query) {return that.shown ? that.hide() : that;}items = that.grepper(that.source);if (!items || !items.length) {return that.shown ? that.hide() : that;}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(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)) {caseSensitive.push(item);}else {caseInsensitive.push(item);}}return beginswith.concat(caseSensitive, caseInsensitive);},//==============================================================================================================================================/// DOM manipulation////===============================================================================================================================================================================//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- this.$element[0].offsetHeight});this.$menu.css({top: pos.top + pos.height,left: pos.left});this.$menu.show();this.shown = true;return this;},//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Highlights the match(es) within the results//highlighter: function (item) {var query = this.query.replace(/[/-/[/]{}()*+?.,///^$|#/s]/g, '//$&');return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {return '<strong>' + match + '</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').html(that.highlighter(item[that.options.display], item));return i[0];});items.first().addClass('active');this.$menu.html(items);return this;},//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- this.hide();},//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Selects the previous result//prev: function (event) {var active = this.$menu.find('.active').removeClass('active');var prev = active.prev();if (!prev.length) {prev = this.$menu.find('li').last();}prev.addClass('active');},//==========================================================================================================================================================================================================/// Events////===========================================================================================================================================================//----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- this)); 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', $.proxy(this.click, this)).on('mouseenter', 'li', $.proxy(this.mouseenter, 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();break;case 27:// escapethis.hide();break;default:this.lookup();}},//---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- being pressed//keypress: function (e) {e.stopPropagation();if (!this.shown) {return;}switch (e.keyCode) {case 9:// tabcase 13:// entercase 27:// escapee.preventDefault();break;case 38:// up arrowe.preventDefault();this.prev();break;case 40:// down arrowe.preventDefault();this.next();break;}},//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ Handles clicking on the results list//click: 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,timeout: 300,method: 'post',triggerLength: 3,loadingClass: null,displayField: null,preDispatch: null,preProcess: null}}$.fn.typeahead.Constructor = Typeahead;//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- $('body').off('.data-api') // More info here: https://github.com/twitter/bootstrap/tree/master/js//$(function () {$('body').on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) {var $this = $(this);if ($this.data('typeahead')) {return;}e.preventDefault();$this.typeahead($this.data());})});}(window.jQuery);The above is the BootStrap Typeahead automatic completion plug-in example code introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!