Bagaimana untuk Menyesuaikan Paparan Pemalam Autolengkap dengan Sorotan Padanan Tebal?

Menyesuaikan Paparan Hasil Pemalam Autolengkap dengan Sorotan Padanan Tebal

Dalam pemalam Autolengkap UI jQuery, menyerlahkan istilah carian dalam hasil lungsur turun meningkatkan pengguna pengalaman. Artikel ini menerangkan cara untuk menyesuaikan paparan ini untuk memenuhi keperluan tertentu.

Penyelesaian: Monkey-Patching

Monyet-patching, teknik untuk mentakrifkan semula fungsi perpustakaan dalaman, menyediakan penyelesaian. Mengatasi fungsi _renderItem, yang menjana item senarai untuk cadangan, membolehkan pemaparan tersuai.

Berikut ialah kod tampalan monyet yang menambahkan serlahan tebal pada bahagian hasil yang sepadan:

<code class="javascript">function monkeyPatchAutocomplete() {
  $.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);
  };
}</code>

Panggil fungsi ini dalam $(document).ready(..):

<code class="javascript">$(document).ready(function() {
  monkeyPatchAutocomplete();
});</code>

Pertimbangan:

Pendekatan penggodaman ini mempunyai beberapa batasan:

• Corak regex dicipta untuk setiap item yang diberikan, sementara ia boleh digunakan semula.
• Gaya sebaris digunakan dan bukannya kelas CSS untuk pemformatan.

Walaupun terdapat batasan ini, teknik secara berkesan menyerlahkan istilah padanan dalam hasil lungsur, memenuhi keperluan yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Menyesuaikan Paparan Pemalam Autolengkap dengan Sorotan Padanan Tebal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!