BootStrap Typeahead自动补全插件实例代码

 $('#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); } }); 

 // ---------------------------------------------------------------------------- // // bootstrap-typeahead.js // // Twitter Bootstrap Typeahead Plugin // v1.2.2 // https://github.com/tcrosen/twitter-bootstrap-typeahead // // // Author // ---------- // Terry Rosen // tcrosen@gmail.com | @rerrify | github.com/tcrosen/ // // // Description // ---------- // Custom implementation of Twitter's Bootstrap Typeahead Plugin // http://twitter.github.com/bootstrap/javascript.html#typeahead // // // Requirements // ---------- // jQuery 1.7+ // Twitter Bootstrap 2.0+ // // ---------------------------------------------------------------------------- ! function ($) { "use strict"; //------------------------------------------------------------------ // // Constructor // var Typeahead = function (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.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 // //============================================================================================================= //------------------------------------------------------------------ // // Check if an event is supported by the browser eg. 'keypress' // * This was included to handle the "exhaustive deprecation" of jQuery.browser in jQuery 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 // //============================================================================================================= //------------------------------------------------------------------ // // Handle AJAX source // ajaxer: function () { var that = this, query = that.$element.val(); if (query === that.query) { return that; } // Query changed that.query = query; // Cancel last timer if set if (that.ajax.timerId) { clearTimeout(that.ajax.timerId); that.ajax.timerId = null; } if (!query || query.length ' + match + ''; }); }, //------------------------------------------------------------------ // // Renders the results 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; }, //------------------------------------------------------------------ // // Item is selected // select: function () { var $selectedItem = this.$menu.find('.active'); this.$element.val($selectedItem.text()).change(); this.options.itemSelected($selectedItem, $selectedItem.attr('data-value'), $selectedItem.text()); return this.hide(); }, //------------------------------------------------------------------ // // Selects the next result // next: function (event) { var active = this.$menu.find('.active').removeClass('active'); var next = active.next(); if (!next.length) { next = $(this.$menu.find('li')[0]); } next.addClass('active'); }, //------------------------------------------------------------------ // // 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 // //============================================================================================================= //------------------------------------------------------------------ // // Listens for user events // listen: function () { this.$element.on('blur', $.proxy(this.blur, this)) .on('keyup', $.proxy(this.keyup, 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)); }, //------------------------------------------------------------------ // // Handles a key being raised up // keyup: function (e) { e.stopPropagation(); e.preventDefault(); switch (e.keyCode) { case 40: // down arrow case 38: // up arrow break; case 9: // tab case 13: // enter if (!this.shown) { return; } this.select(); break; case 27: // escape this.hide(); break; default: this.lookup(); } }, //------------------------------------------------------------------ // // Handles a key being pressed // keypress: function (e) { e.stopPropagation(); if (!this.shown) { return; } switch (e.keyCode) { case 9: // tab case 13: // enter case 27: // escape e.preventDefault(); break; case 38: // up arrow e.preventDefault(); this.prev(); break; case 40: // down arrow e.preventDefault(); this.next(); break; } }, //------------------------------------------------------------------ // // Handles cursor exiting the textbox // blur: function (e) { var that = this; e.stopPropagation(); e.preventDefault(); setTimeout(function () { if (!that.$menu.is(':focus')) { that.hide(); } }, 150) }, //------------------------------------------------------------------ // // Handles clicking on the results list // click: function (e) { e.stopPropagation(); e.preventDefault(); this.select(); }, //------------------------------------------------------------------ // // Handles the mouse entering the results list // mouseenter: function (e) { this.$menu.find('.active').removeClass('active'); $(e.currentTarget).addClass('active'); } } //------------------------------------------------------------------ // // Plugin definition // $.fn.typeahead = function (option) { return this.each(function () { var $this = $(this), data = $this.data('typeahead'), options = typeof option === 'object' && option; if (!data) { $this.data('typeahead', (data = new Typeahead(this, options))); } if (typeof option === 'string') { data[option](); } }); } //------------------------------------------------------------------ // // Defaults // $.fn.typeahead.defaults = { source: [], items: 8, menu: '
', item: '
', display: 'name', val: 'id', itemSelected: function () { }, ajax: { url: null, timeout: 300, method: 'post', triggerLength: 3, loadingClass: null, displayField: null, preDispatch: null, preProcess: null } } $.fn.typeahead.Constructor = Typeahead; //------------------------------------------------------------------ // // DOM-ready call for the Data API (no-JS implementation) // // Note: As of Bootstrap v2.0 this feature may be disabled using $('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);