Use the upgraded Bootstraptypeaheadv1.2.2

The typeahead attached to Bootstrap2 was introduced last time. It is very powerful, but it is not easy to use. The author TerryRosen has upgraded a new version v1.2.2 and made great improvements. Github. comtcrosentwitter-bootstrap-typeahead environment TwitterBootstrap2.0jQue

The typeahead attached to Bootstrap 2 was introduced last time. It is very powerful, but it is not very convenient to use. The author Terry Rosen has upgraded a new version v1.2.2 and made great improvements. Https://github.com/tcrosen/twitter-bootstrap-typeahead environment Twitter Bootstrap 2.0 jQue

The typeahead attached to Bootstrap 2 was introduced last time. It is very powerful, but it is not very convenient to use. The author Terry Rosen has upgraded a new version v1.2.2 and made great improvements.

Https://github.com/tcrosen/twitter-bootstrap-typeahead

Environment

• Twitter Bootstrap 2.0 +
• JQuery 1.7 +

Page preparation

Script

$(myElement).typeahead(options);

Event

Event	Description
Grepper	Filters relevant results from the source.
Highlighter	Highlights any matching results in the list.
ItemSelected	The callback function when a project is selected. Item: The selected HTML element. Val: * val * Attribute Value Text: * display * Attribute Value
Lookup	Determines if source is remote or local and initializes the search.
Matcher	Looks for a match between the query and a source item.
Render	Renders the list of results.
Select	Selects an item from the results list.
Sorter	Sorting result.

Initialization parameters

Name	Type	Default Value	Description
Ajax	Object	{ url: null, timeout: 300, method: 'post', triggerLength: 3, loadingClass: null, displayField: null, preDispatch: null, preProcess: null}	The object required to use a remote datasource. See also: ajax as a string (below)
Ajax	String	Null	Optionally, a simple URL may be used instead of the AJAX object. See also: ajax as an object (above)
Display	String	'Name'	The object property to match the query against and highlight in the results.
Item	String	' '	The HTML rendering for a result item.
Items	Integer	8	The maximum number of items to show in the results.
Menu	String	' '	The HTML rendering for the results list.
Source	Object	[]	The source to search against.
Val	String	'Id'	The object property that is returned when an item is selected.

Basic usage

Use source directly if local data is used

var mySource = [{ id: 1, name: 'Terry'}, { id: 2, name: 'Mark'}, { id: 3, name: 'Jacob'}];$('#myElement').typeahead({    source: mySource});

If Ajax is used, you can directly specify the url. Note that the current version must use an object-type data source. By default, the displayed text is the name attribute of the object. You can use the display configuration of the initialization parameter, the default identifier property is id, which can be configured with val.

$('#myElement').typeahead({    ajax: '/path/to/mySource'});

Use Ajax

$ (Function () {$ ('# product_search '). typeahead ({ajax: {url: '@ Url. action ("AjaxService") ', timeout: 300, // latency method: 'post', triggerLength: 3, // after entering a few characters, start requesting loadingClass: null, // when loading data, the style class preDispatch used by the element is null, // The Preprocessing Method preProcess called before the request is sent: null // After the Ajax request is complete, call post-processing method}, display: "name", // The default object property name is name attribute val: "id", // The default identifier property name is id attribute items: 8, // display the maximum number of projects itemSelected: function (item, val, text) {// when you select a project, callback Function console.info (item );}});});

If we need to add additional request parameters in the request in addition to parameters for progressive search, we can use preDispatch for additional processing. Note that an object must be returned, this object will be used to use jQuery's Ajax method as a parameter.

$ (Function () {$ ('# product_search '). typeahead ({ajax: {url: '@ Url. action ("AjaxService") ', timeout: 300, // latency method: 'post', triggerLength: 3, // after entering a few characters, start requesting loadingClass: null, // preDispatch: function (query) {var para = {other: 'xxxxxxxxxxx'}; para. query = query; return para;}, preProcess: function (result) {return result ;}}, display: "name", // The default object property name is name attribute val: "id", // The default identifier property name is id attribute items: 8, // maximum number of projects displayed itemSelected: function (item, val, text) {// when a project is selected, the callback function console.info (item); // lele.info ($ ("# product_search "). val ());}});});