Implementation of AutoComplete automatic form _javascript technique based on bootstrap plugin

Based on the Bootstrap plug-in implementation AutoComplete automatic completion of the form, providing scripting code, use cases, as well as the backend server (PHP), some of the original text is not clear place, I hope to help you.

First of all, it must be loaded bootstrap&jquery, it is necessary to note that the back-end of the two-dimensional array, and the Formatitem method is consistent with the following calls;
In addition, the returned data first parsejson! remember.

Related parameter Description:

Source:function (query,process) {}. Query represents the string in the current text input box, in which you can request data (in the form of an array of JSON objects) with Ajax backwards, and then use the returned object as a parameter to the process;
Formatitem:function (item) {}. Converts a specific JSON object that returns data to a string format that is displayed in a hint list, returning a value: a string;
SetValue:function (item) {}. When you select an item in the prompt list, set the value displayed in the Text entry box and the value that you want to get actually. Return value format: {' data-value ': item[' the input box displays the item property of the value], ' real-value ': item[' the Item property that actually needs to get the value '}, the value can be obtained later by the Real-value property of the text input box;
items: The maximum number of result sets for automatic prompt completion, default: 8;
minlength: The string in the current text input box reaches the value of the property to match processing, the default: 1;
delay: Specifies the number of delay milliseconds to request data back to the table to prevent too fast input causing frequent back-desk requests, default: 500

Based on Bootstrap plug-in implementation AutoComplete automatic completion of the form, the code is as follows

1. Code

<script>
$ (' #sim_iccid '). AutoComplete ({
 source:function (query,process) {
 var matchcount = this.options.items;//allows the maximum number of result sets to be returned
 $.get ("http://www.soyiyuan.com/update/", {"iccid": Query, "MatchCount": Matchcount},function (respdata) {
  respdata = $.parsejson (respdata);//parse 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 as a two-dimensional array
echo Json_encode ($data)
3. Standard JSON format to return

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

The bootstrap automatic completion control AutoComplete is based on Bootstrap's own 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;//returns the maximum number of 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 () {//Get the actual value of the text box
 var regioncode = $ ("#autocompleteInput"). attr ("Real-value") | | "";
 alert (Regioncode);
 });

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn.