Bagaimana untuk Menyesuaikan Pemformatan Hasil Plugin Autolengkap dalam UI jQuery?

Menyesuaikan Pemformatan Hasil Pemalam Autolengkap

Apabila menggunakan pemalam Autolengkap UI jQuery yang popular, anda mungkin menghadapi keperluan untuk menyerlahkan jujukan aksara tertentu dalam hasil drop-down untuk meningkatkan pengalaman pengguna. Artikel ini menerangkan cara untuk mencapai kesan ini.

Monyet-Menampal Widget Autolengkap

Untuk menyesuaikan pemformatan hasil, anda perlu menggantikan fungsi lalai _renderItem bagi widget autolengkap. Fungsi ini bertanggungjawab untuk mencipta setiap item dalam senarai juntai bawah. Dengan mengatasinya, anda boleh mengubah suai penampilan item untuk memasukkan pemformatan tersuai.

Berikut ialah contoh tampung monyet sedemikian:

  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 );
      };
  }

Panggil fungsi ini sekali dalam $(dokumen). sedia(...) pengendali acara untuk mengaktifkan penyesuaian.

Mengendalikan Sensitiviti Kes

Jika anda ingin mengekalkan kes rentetan perlawanan daripada menggunakan kes daripada aksara yang ditaip, gunakan baris ini:

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

Penghadan

Walaupun kaedah ini membolehkan anda menyerlahkan istilah carian dalam hasil lungsur, ia juga mempunyai had:

• Setiap widget autolengkap pada halaman akan terjejas.
• Istilah ini diserlahkan dengan penggayaan sebaris dan bukannya kelas CSS.

Nota Tambahan

Jika anda perlu menyesuaikan hanya satu contoh tertentu widget Autolengkap pada halaman, anda boleh menggunakan pendekatan yang lebih disasarkan. Rujuk dokumentasi untuk butiran.

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