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

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.