BootStrap Typeahead automatic complement full plugin instance code _javascript technique

The key code looks like this:

$ (' #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:
itemselected:function (item, Val, text) {
$ ("#SalesID"). Val (val);
}

This kind of typeahead automatic complement is not bootstrap commonly used typeahead.js. The following is the Typeahead.js code (if any bootstrap3-typeahead.js is better)

----------------------------------------------------------------------------///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+//Twitt
ER 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.typ
Eahead.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 was supported by the browser eg. ' KeyPress '//* This is included to handle the "exhaustive deprecation" of jquery.browser in JQuery 1.8//eventsupported : function (eventName) {var issupported = (eventName in-$element); if (!issupported) {this. $element. setattribute (Ev
Entname, ' 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 (!que ry | | Query.length < That.ajax.triggerLength) {//Cancel the AJAX callback if in progress if (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 timer that.ajax.timerId = settimeout (function () {$.proxy That.ajaxexecute (Query)
)}, That.ajax.timeout);
return to that; },//------------------------------------------------------------------////Execute an AJAX request//Ajaxexecute: function (query) {This.ajaxtoggleloadclass (true);//Cancel Last Call if already in progress if (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; },//------------------------------------------------------------------/////Perform a lookup in the AJAX results//Ajax Lookup:function (data) {var items; This.ajaxtoggleloadclass (false); if (!THIS.AJAX.XHR) return; if (this.ajax.preProces
s) {data = this.ajax.preProcess (data);}//Save for selection retreival this.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 ();
},//------------------------------------------------------------------////Toggle the loading class// Ajaxtoggleloadclass:function (Enable) {if (!this.ajax.loadingclass) return: this. $element. Toggleclass (
This.ajax.loadingClass, enable); },
//=========================================================================================================== = =////Data manipulation////=============================================================================================================
//------------------ 
------------------------------------------------////Search Source//Lookup:function (event) {var = this, items; if (That.ajax) {that.ajaxer ();} else {that.query =. $element. val (); if (!that.query) {return that.shown? that.hi
De (): that;
Items = That.grepper (That.source); if (!items | |!items.length) {return that.shown. That.hide (): that.} return That.render (Items.slice (0, that.options.it
EMS)). Show (); },//------------------------------------------------------------------////Filters relevent results//Grepper:fun Ction (data) {var = this, items; if (data && data.length &&!data[0].hasownproperty (That.options.dis 
) {return null;} items = $.grep (data, function (item) {return That.matcher (Item[that.options.display], item);});
return This.sorter (items); },
//------------------------------------------------------------------////Looks for a match in the source/matcher:function (item) {return ~item.tolowercase (). IndexOf (this.query.to
lowercase ()); },//------------------------------------------------------------------////sorts the results//sorter:function (
Items) {var that = this, Beginswith = [], casesensitive = [], caseinsensitive = [], item = (item = Items.shift ()) { if (!item[that.options.display].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////===================================================================================== ========================//------------------------------------------------------------------///Shows the results list//show:function () {var pos = $.extend ({}, this. $element. Offset (), {height:this. $element [0].offset
Height});
this. $menu. css ({top:pos.top + pos.height, left:pos.left});
this. $menu. Show ();
This.shown = true;
return this;  },//------------------------------------------------------------------////Hides the results list//hide:function () {this. $menu. Hide (); this.shown = false; 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 ($, match) {return ' <strong> ' + match + ' </st
Rong> ';
}); },//------------------------------------------------------------------////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 () {VA
R $selectedItem = this. $menu. Find ('. active ');
this. $element. val ($selectedItem. Text ()).
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
= $ ($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. In (' Blur ', $.proxy (This.blur, this)). On (' KeyUp ', $.proxy (This.keyup, this)); if (thi s.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://down ARROW case://Up
Arrow break;
Case 9://tab,//Enter if (!this.shown) {return;} this.select ();
Break
Case://Escape this.hide ();
Break
Default:this.lookup (); },//------------------------------------------------------------------////Handles a key being pressed//keypress:f  Unction (e) {e.stoppropagation (); if (!this.shown) {return;} switch (E.keycode) {case 9://Tab case://Enter case
://Escape e.preventdefault ();
Break
Case://Up Arrow e.preventdefault ();
This.prev ();
Break
Case://down arrow e.preventdefault ();
This.next ();
Break },//------------------------------------------------------------------////Handles cursor exiting the textbox//Blu R:function (e) {var that = this; E.stoppropagation (); E.preventdefault (); settimeout (function () {if (!that. $menu.? Focus ')) {that.hide ();}},//------------------------------------------------------------------////Handles Clicking on the results list//Click:function (e) {E.stoppropaga
tion ();
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 o
Ption = = ' object ' && option; if (!data) {$this. Data (' Typeahead ', (data = new Typeahead (this, options));} if (typeof option = = ' string ') {Data[opti
On] ();
}
});
}//------------------------------------------------------------------/////Defaults//$.fn.typeahead.defaults = { Source: [], Items:8, menu: ' <ul class= ' Typeahead dropdown-menU "></ul>", item: ' <li><a href= ' # ' ></a></li> ', display: ' Name ', Val: ' id ', Itemselected:function () {}, Ajax: {url:null, timeout:300, method: ' Post ', Triggerlength:3, Loadingclass:null, disp
Layfield: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 is disabled using $ (' body '). Off ('. Data-api ')/More I NFO 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 a small series to introduce the bootstrap Typeahead automatic complement plug-in instance code, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!