Autocomplete automatic form completion Based on bootstrap plug-in, bootstrap form plug-in

Autocomplete automatic form completion Based on bootstrap plug-in, bootstrap form plug-in

Based on the bootstrap plug-in, autocomplete can automatically complete the form and provide script code, use cases, and backend servers (php). The original text is not clear and I hope to help you.

First, you must load bootstrap & jquery. It should be noted that the two-dimensional array returned by the backend must be consistent with the call under the formatItem method;
In addition, the returned data must first be parseJSON! Remember.

Parameter description:

Source:Function (query, process ){}. Query indicates the string in the current text input box. In this method, you can request data (json object in array form) from the background through ajax, and then use the returned object as the parameter of process;
FormatItem:Function (item ){}. Converts a specific json object of the returned data into a string format, which is displayed in the prompt list. Return Value: string;
SetValue:Function (item ){}. When you select an item in the prompt list, set the value displayed in the text input box and the value to be obtained. Return value format: {'data-value': item ["item attribute of the value displayed in the input box"], 'real-value ': item ["The property of the item that actually needs to get the value"]}. The value can be obtained through the real-value Attribute of the text input box in the future;
Items:Maximum number of result sets for Automatic completion prompt. Default Value: 8;
MinLength:Matching is performed only when the character string in the current text input box reaches this attribute value. Default Value: 1;
Delay:The data request is sent to the background only after a specified delay of milliseconds to prevent frequent requests to the background due to excessive input. Default Value: 500

Autocomplete automatically completes the form based on the bootstrap plug-in. The Code is as follows:

1. Code

<Script> $ ('# sim_iccid '). autocomplete ({source: function (query, process) {var matchCount = this. options. items; // maximum number of allowed returned result sets $. get ("http://www.soyiyuan.com/update/", {"iccid": query, "matchCount": matchCount}, function (respData) {respData = $. parseJSON (respData); // parse the returned data return process (respData) ;}) ;}, formatItem: function (item) {return item ["iccid"] + "(" + item ["mobile"] + ")" ;}, setValue: function (item) {return {'data-value': item ["iccid"], 'real-value': item ["mobile"] };}); </script>

2. $ data is a two-dimensional array
Echo json_encode ($ data)
3. Standard json format to be returned

[Code] [{"iccid": "12345678901234567890", "mobile": "1850000" },{ "iccid": "12345785", "mobile ": "1850001"}] [code]

Bootstrap AutocompleteIt is transformed Based on the built-in bootstrap Control typeahead, because typeahead does not support complex objects.

// The sample code is as follows: $ ('# autocompleteInput '). autocomplete ({source: function (query, process) {var matchCount = this. options. items; // maximum number of returned result sets $. post ("/bootstrap/region", {"matchInfo": query, "matchCount": matchCount}, function (respData) {return process (respData );});}, formatItem: function (item) {return item ["regionName"] + "(" + item ["regionNameEn"] + "," + item ["regionShortnameEn"] + ") -"+ item [" regionCode "] ;}, setValue: function (item) {return {'data-value': item [" regionName "], 'real-value ': item ["regionCode"] };}); $ ("# goBtn "). click (function () {// obtain the actual value of the text box var regionCode =$ ("# autocompleteInput "). attr ("real-value") | ""; alert (regionCode );});

The above is all the content of this article, hoping to help you learn.