Rumah >hujung hadapan web >tutorial js >Bagaimana untuk Menyerlahkan Istilah Carian dalam Hasil Autolengkap UI jQuery?

Bagaimana untuk Menyerlahkan Istilah Carian dalam Hasil Autolengkap UI jQuery?

DDD
DDDasal
2024-10-21 08:05:03827semak imbas

How to Highlight Search Terms in jQuery UI Autocomplete Results?

Menyesuaikan Hasil Pemalam Autolengkap

S: Bolehkah saya Menyerlahkan Istilah Carian dalam Hasil Drop-Down Autolengkap?

Ya, anda boleh menyesuaikan format hasil pemalam Autolengkap untuk menyerlahkan aksara yang dicari.

J: Menampal Monyet Widget Autolengkap

Untuk mencapai kesan ini, gunakan tampalan monyet, teknik di mana fungsi dalaman dalam perpustakaan ditakrifkan semula. Dalam widget Autolengkap (versi 1.8rc3 UI jQuery), fungsi _renderItem bertanggungjawab untuk mencipta hasil lungsur turun. Begini cara untuk mentakrifkannya semula:

function monkeyPatchAutocomplete() {
  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 );
}

B: Memelihara Kes dengan "$&

Untuk mengekalkan kes rentetan yang dipadankan, gantikan this.term dengan $ & dalam fungsi ganti:

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

C: Limitasi

Godam ini mempunyai had berikut:

  • Objek RegExp baharu dicipta untuk setiap item yang diberikan dalam senarai.
  • Tiada kelas CSS digunakan untuk pemformatan, jadi berbilang Autolengkap pada halaman yang sama akan mempunyai gaya yang sama.

D : Menggunakan Perubahan pada Kejadian Tertentu

Jika anda perlu mengubah suai hanya satu contoh Autolengkap, rujuk soalan berikut: Bagaimana untuk menampal hanya satu tika Autolengkap pada halaman?

Atas ialah kandungan terperinci Bagaimana untuk Menyerlahkan Istilah Carian dalam Hasil Autolengkap UI jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn