Melaksanakan autolengkap untuk melengkapkan borang secara automatik berdasarkan kemahiran plug-in_javascript bootstrap

Berdasarkan pemalam bootstrap, autolengkap melengkapkan borang secara automatik, menyediakan kod skrip, kes penggunaan dan pelayan bahagian belakang (php).

Pertama sekali, anda mesti memuatkan bootstrap&jquery Apa yang memerlukan penjelasan tambahan ialah tatasusunan dua dimensi yang dikembalikan oleh bahagian belakang harus konsisten dengan panggilan di bawah kaedah formatItem;
Selain itu, data yang dikembalikan mestilah parseJSON terlebih dahulu.

Perihalan parameter berkaitan:

sumber: fungsi(pertanyaan, proses){}. pertanyaan mewakili rentetan dalam kotak input teks semasa Dalam kaedah ini, anda boleh meminta data (objek json dalam bentuk tatasusunan) dari latar belakang melalui ajax, dan kemudian menggunakan objek yang dikembalikan sebagai parameter proses; >
formatItem: fungsi(item){}. Tukar objek json tertentu bagi data yang dikembalikan kepada format rentetan untuk dipaparkan dalam senarai gesaan: rentetan
setValue: fungsi(item){}. Apabila item dalam senarai gesaan dipilih, tetapkan nilai yang dipaparkan dalam kotak input teks dan nilai sebenar yang akan diperolehi. Format nilai pulangan: {'data-value':item["Atribut item bagi nilai yang dipaparkan dalam kotak input"],'real-value':item["Atribut item bagi nilai sebenar yang perlu diperolehi" ]}, yang boleh digunakan kemudian melalui kotak input teks Atribut nilai sebenar mendapat nilai
item: Bilangan maksimum set hasil untuk gesaan autolengkap, lalai: 8;
MinLength: Pemadanan hanya akan dilakukan apabila rentetan dalam kotak input teks semasa mencapai nilai atribut ini:
kelewatan: Nyatakan bilangan milisaat sebelum benar-benar meminta data dari latar belakang untuk mengelakkan permintaan kerap ke latar belakang yang disebabkan oleh input lalai: 500

Laksanakan autolengkap untuk melengkapkan borang secara automatik berdasarkan pemalam bootstrap, kodnya adalah seperti berikut

1

2. $data ialah tatasusunan dua dimensi

<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>

echo json_encode( $data )

3. Format json standard yang perlu dikembalikan

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

Kawalan autolengkap Bootstrap Autolengkap

adalah berdasarkan kepala taip kawalan bootstrap sendiri, kerana kepala taip tidak menyokong objek kompleks.

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.

//示例代码如下：
 
$('#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);
 });