Bagaimana untuk Menyerlahkan Istilah Carian dalam Hasil Autolengkap UI jQuery?

DDD
Lepaskan: 2024-10-21 08:05:03
asal
710 orang telah melayarinya

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 );
}
Salin selepas log masuk

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>");
Salin selepas log masuk

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!

sumber:php
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!