Based on the bootstrap plug-in, autocomplete automatically completes forms, provides script code, use cases, and background server (php). There are some things that are not explained clearly in the original text, and I hope it can help everyone.
First of all, I must be loading bootstrap&jquery. It should be noted that the two-dimensional array returned by the backend is consistent with the call below the formatItem method;
In addition, the returned data must be parseJSON first! Remember.
Related parameter description:
source: function(query,process){}. query represents the string in the current text input box. In this method, data can be requested from the background (a json object in the form of an array) through ajax, and then the returned object is used as a parameter of the process;
formatItem: function(item){}. The specific json object that returns the data is converted into a string format, which is used to display it in the prompt list, and the return value is: string;
setValue: function(item){}. When an item on the prompt list is selected, set the value displayed in the text input box and the value that actually needs to be obtained. Return value format: {'data-value':item["item property of the value displayed in the input box"],'real-value':item["item property of the actual value that needs to be obtained"]}, later, this value can be obtained through the real-value property of the text input box;
items: The maximum number of result sets for automatic completion prompts, default: 8;
minLength: The matching process will be performed only when the string in the current text input box reaches the property value. Default: 1;
delay: After specifying the number of delay milliseconds, data will be requested from the background to prevent frequent requests from the background from being frequently caused by fast input. Default: 500
Based on the bootstrap plug-in, autocomplete automatically complete form, the code is as follows
1. Code
<script>$('#sim_iccid').autocomplete({ source:function(query,process){ var matchCount = this.options.items;//The maximum number of result sets allowed is $.get("http://www.soyiyuan.com/update/",{"iccid":query,"matchCount":matchCount},function(respData){ respData = $.parseJSON(respData);//The returned data is returned 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. The standard json format that needs to be returned
[code][{"iccid":"12345678901234567890","mobile":"1850000"},{"iccid":"12345785","mobile":"1850001"}][code]
Bootstrap autocomplete control Autocomplete is transformed based on the 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;//Return 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 still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all about this article, I hope it will be helpful to everyone's learning.