Bagaimana untuk Menyerlahkan Istilah Carian dalam JQuery UI Autocomplete Dropdown?

Menyesuaikan Hasil Pemalam Autolengkap

Pemalam Autolengkap UI jQuery menawarkan pelbagai jenis ciri, tetapi ia mungkin tidak selalu memenuhi keperluan pemformatan tepat anda. Jika anda perlu menyerlahkan jujukan aksara carian dalam hasil lungsur turun, berikut ialah cara anda boleh memanfaatkan fleksibiliti pemalam:

Monyet-Menampal Pemalam Autolengkap

kunci untuk menyesuaikan keputusan adalah untuk menggantikan fungsi lalai _renderItem yang menjana item senarai juntai bawah. Anda boleh melakukan ini melalui teknik yang dipanggil "menampal monyet." Dengan mentakrifkan fungsi _renderItem baharu, anda boleh memaparkan hasil dalam format yang diingini.

Pelaksanaan

Sampel kod berikut menyediakan versi dipertingkatkan fungsi _renderItem yang memformat padanan jujukan aksara dengan teks tebal:

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

Menyepadukan ke dalam Kod Anda

Panggil fungsi monkeyPatchAutocomplete dalam blok $(document).ready(...) sekali untuk mendayakan pemformatan tersuai:

monkeyPatchAutocomplete();

Had

Walaupun teknik ini menyediakan fungsi asas, ia mempunyai beberapa had:

• Ia mencipta objek regexp berasingan untuk setiap item, yang boleh dioptimumkan untuk kecekapan.
• Pemformatan menggunakan gaya sebaris, yang mungkin menjejaskan ketekalan merentas berbilang widget autolengkap pada halaman yang sama.

Memelihara Kes

Untuk mengekalkan kes asal aksara carian dan bukannya memadankan aksara yang ditaip, gunakan "$&" dan bukannya "this.term" dalam kod:

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

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