Bagaimana untuk Menyesuaikan Format Paparan Hasil dalam Pemalam Autolengkap?

Menyesuaikan Format Paparan Hasil dalam Pemalam Autolengkap

Pemalam Autolengkap UI jQuery menyediakan cara yang berkuasa untuk mengendalikan input pengguna dan mencadangkan pilihan yang berkaitan . Secara lalai, hasil lungsur turun memaparkan padanan input pengguna dalam item yang dicadangkan. Walau bagaimanapun, anda mungkin menginginkan format yang lebih tersuai, seperti menyerlahkan aksara carian dalam hasil yang dipaparkan.

Monkey-Patching the Plugin

Untuk mencapai matlamat ini, anda boleh menggunakan teknik yang dikenali sebagai "tampalan monyet", di mana anda mentakrifkan semula fungsi dalaman dalam perpustakaan. Dalam kes ini, anda perlu mengatasi fungsi _renderItem yang bertanggungjawab untuk mencipta setiap item dalam senarai lungsur turun.

Mencipta Fungsi _renderItem Tersuai

Berikut ialah contoh fungsi _renderItem tersuai:

$.ui.autocomplete.prototype._renderItem = function( ul, item) {
  var re = new RegExp("^" + this.term);
  var t = item.label.replace(re,"<span style='font-weight:bold;color:Blue;'>" + this.term + "</span>");
  return $( "<li></li>" )
    .data( "item.autocomplete", item )
    .append( "<a>" + t + "</a>" )
    .appendTo( ul );
};

Fungsi ini menggunakan ungkapan biasa untuk mengasingkan aksara yang sepadan dan membungkusnya dalam elemen rentang HTML dengan penggayaan tertentu. Elemen span menggunakan fon tebal dan warna biru untuk menyerlahkan padanan.

Memohon Patch

Setelah anda mencipta fungsi tersuai, anda boleh menggunakannya pada widget Autolengkap dengan memanggil fungsi berikut dalam acara sedia dokumen:

monkeyPatchAutocomplete();

Fungsi ini akan menggantikan fungsi lalai _renderItem dengan versi tersuai anda.

Memelihara Kes Aksara

Perhatikan bahawa kod di atas menyerlahkan padanan tetapi tidak mengekalkan kes input asal. Untuk mengekalkan kes itu, ubah suai baris gantian dalam fungsi _renderItem seperti berikut:

var t = item.label.replace(re,"<span style='font-weight:bold;color:Blue;'>" + "$&amp;" + "</span>");

Tampalan Sasaran

Perubahan di atas mempengaruhi semua widget Autolengkap pada halaman. Jika anda ingin menyesuaikan hanya contoh tertentu, rujuk soalan "Bagaimana untuk menampal hanya satu contoh Autolengkap pada halaman?"

Atas ialah kandungan terperinci Bagaimana untuk Menyesuaikan Format Paparan Hasil dalam Pemalam Autolengkap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!