Implementing autocomplete to automatically complete forms based on bootstrap plug-in_javascript skills

Based on the bootstrap plug-in, autocomplete automatically completes the form, providing script code, use cases, and backend server (php). There are some things that are not clear in the original text. I hope it can help everyone.

First of all, you must load bootstrap&jquery. What needs additional explanation is that the two-dimensional array returned by the backend should be 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, you can request data (json object in the form of an array) from the background through ajax, and then use the returned object as a parameter of the process;
formatItem: function(item){}. Convert a specific json object of the returned data into a string format to be displayed in the prompt list. Return value: string;
setValue: function(item){}. When an item in the prompt list is selected, set the value displayed in the text input box and the actual value to be obtained. Return value format: {'data-value':item["The item attribute of the value displayed in the input box"],'real-value':item["The item attribute of the actual value that needs to be obtained"]}, which can be used later through the text input box The real-value attribute gets the value;
items: The maximum number of result sets for auto-complete prompts, default: 8;
minLength: Matching will only be performed when the string in the current text input box reaches this attribute value. Default: 1;
delay: Specify the number of milliseconds before actually requesting data from the background to prevent frequent requests to the background caused by too fast input. Default: 500

Implement autocomplete to automatically complete the form based on bootstrap plug-in, the code is as follows

1. Code

<script>
$('#sim_iccid').autocomplete({
 source:function(query,process){
  var matchCount = this.options.items;//允许返回结果集最大数量
  $.get("http://www.soyiyuan.com/update/",{"iccid":query,"matchCount":matchCount},function(respData){
   respData = $.parseJSON(respData);//解析返回的数据
   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 that needs to be returned

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

Bootstrap autocomplete control Autocomplete is based on bootstrap's own control typeahead, because typeahead does not support complex objects.

//示例代码如下：
 
$('#autocompleteInput').autocomplete({
  source:function(query,process){
   var matchCount = this.options.items;//返回结果集最大数量
   $.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(){ //获取文本框的实际值
  var regionCode = $("#autocompleteInput").attr("real-value") || "";
  alert(regionCode);
 });

The above is the entire content of this article, I hope it will be helpful to everyone’s study.