Berdasarkan plug-in bootstrap, AutoComplete secara otomatis melengkapi formulir, menyediakan kode skrip, penggunaan kasing, dan server latar belakang (PHP). Ada beberapa hal yang tidak dijelaskan dengan jelas dalam teks asli, dan saya harap ini dapat membantu semua orang.
Pertama -tama, saya harus memuat bootstrap & jQuery. Perlu dicatat bahwa array dua dimensi yang dikembalikan oleh backend konsisten dengan panggilan di bawah metode formatitem;
Selain itu, data yang dikembalikan harus Parsejson terlebih dahulu! Ingat.
Keterangan Parameter Terkait:
Sumber: function (kueri, proses) {}. Kueri mewakili string di kotak input teks saat ini. Dalam metode ini, data dapat diminta dari latar belakang (objek JSON dalam bentuk array) melalui Ajax, dan kemudian objek yang dikembalikan digunakan sebagai parameter proses;
formatItem: function (item) {}. Objek JSON spesifik yang mengembalikan data dikonversi menjadi format string, yang digunakan untuk menampilkannya di daftar prompt, dan nilai pengembalian adalah: string;
setValue: function (item) {}. Ketika item pada daftar prompt dipilih, atur nilai yang ditampilkan di kotak input teks dan nilai yang sebenarnya perlu diperoleh. Format Nilai Pengembalian: {'Nilai Data': Item ["Properti item dari nilai yang ditampilkan dalam kotak input"], 'Nilai Nyata': Item ["Item Properti dari nilai aktual yang perlu diperoleh"]}, kemudian, nilai ini dapat diperoleh melalui properti nyata dari kotak input teks;
Item: Jumlah maksimum set hasil untuk prompt penyelesaian otomatis, default: 8;
MinLength: Proses pencocokan akan dilakukan hanya ketika string di kotak input teks saat ini mencapai nilai properti. Default: 1;
Penundaan: Setelah menentukan jumlah penundaan milidetik, data akan diminta dari latar belakang untuk mencegah permintaan yang sering dari latar belakang sering disebabkan oleh input cepat. Default: 500
Berdasarkan plug-in bootstrap, AutoComplete secara otomatis lengkap, kode ini sebagai berikut
1. Kode
<script> $ ('#sim_iccid'). AutoComplete ({source: function (kueri, proses) {var matchcount = this.options.items; // jumlah maksimum set hasil yang diizinkan adalah $ .get ("http://www.soyiyuan.com/update/", {"iccid": query, "matchcount": matchcount}, function (respData) {respData = $ .parsejson (respData); // data yang dikembalikan adalah proses yang dikembalikan (respdata) (respData); item ["iccid"]+"("+item ["seluler"]+")";2. $ Data adalah array dua dimensi
echo json_encode ($ data)
3. Format JSON standar yang perlu dikembalikan
[kode] [{"iccid": "12345678901234567890", "Mobile": "1850000"}, {"iccid": "12345785", "Mobile": "1850001"}] [kode] [kode]
Bootstrap AutoComplete Control AutoComplete diubah berdasarkan typeahead kontrol bootstrap sendiri, karena Typealhead tidak mendukung objek yang kompleks.
//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 Proses (respData);}); {'value data': item ["regionName"], 'value-real-value': item ["regioncode"]}; $ ("#gOBTN"). Klik (function () {// Dapatkan nilai aktual dari kotak teks var regioncode = $ ("#autoCompetEnputput"). ATTR ("Real-Value") || ""; waspada (regionCode);});Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.