Bagaimana cara menghapus / mengubah teks JQuery UI Autocomplete Helper?

Tampaknya ini adalah fitur baru di JQuery UI 1.9.0, karena saya sering menggunakan JQuery UI sebelumnya dan teks ini tidak pernah muncul.

Tidak dapat menemukan apa pun yang terkait dengan dokumentasi API.

Jadi, menggunakan contoh pelengkapan otomatis dasar dengan sumber lokal

$( "#find-subj" ).autocomplete({
    source: availableTags
});

Saat pencarian cocok, teks pembantu terkait ini akan ditampilkan:

'1 hasil tersedia, gunakan tombol panah atas dan bawah untuk menavigasi.'

Bagaimana saya bisa menonaktifkannya dengan cara yang baik, bukan dengan menghapusnya dengan pemilih JQuery.

Saya tahu ini telah terjawab tetapi hanya ingin memberikan contoh implementasi:

var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++"
    ];

$("#find-subj").autocomplete({
    source: availableTags,
    messages: {
        noResults: 'no results',
        results: function(amount) {
            return amount + 'results.'
        }
    }
});

Ini digunakan untuk aksesibilitas, cara mudah untuk menyembunyikannya adalah dengan CSS:

.ui-helper-hidden-accessible { display:none; }

Atau (lihat komentar Daniel di bawah)

.ui-helper-hidden-accessible { position: absolute; left:-999em; }

Jawaban teratas di sini mencapai efek visual yang diinginkan, tetapi mengalahkan objek jQuery yang memiliki dukungan ARIA, dan agak menjijikkan bagi pengguna yang mengandalkannya! Mereka yang telah menyebutkan bahwa jQuery CSS menyembunyikan ini untuk Anda benar, dan inilah gaya yang melakukannya:

.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

Salin itu ke stylesheet Anda alih-alih menghapus pesannya, silakan :).

Menurut blog ini :

Kami sekarang menggunakan wilayah langsung ARIA untuk mengumumkan kapan hasil tersedia dan cara menavigasi melalui daftar saran. Pengumuman dapat dikonfigurasi melalui opsi pesan, yang memiliki dua properti: noResults saat tidak ada item yang dikembalikan dan hasil saat setidaknya satu item dikembalikan. Secara umum, Anda hanya perlu mengubah opsi ini jika Anda ingin string ditulis dalam bahasa yang berbeda. Opsi pesan dapat berubah di versi mendatang sementara kami mengerjakan solusi lengkap untuk manipulasi string dan internasionalisasi di semua plugin. Jika Anda tertarik dengan opsi pesan, kami mendorong Anda untuk membaca sumbernya saja; kode yang relevan ada di bagian paling bawah plugin pelengkapan otomatis dan hanya beberapa baris.

...

Jadi, bagaimana penerapannya pada widget pelengkapan otomatis? Nah, sekarang ketika Anda mencari item, jika Anda memiliki pembaca layar yang terpasang, itu akan membaca Anda sesuatu seperti "1 hasil tersedia, gunakan tombol panah atas dan bawah untuk menavigasi.". Cukup keren, ya?

Jadi jika Anda pergi ke github dan melihat kode sumber pelengkapan otomatis , sekitar baris 571 Anda akan melihat di mana ini sebenarnya diterapkan.

Menambahkan css jquery juga berfungsi untuk menghapus teks instruksional.

<link
 rel="stylesheet"
 href="http://code.jquery.com/ui/1.9.0/themes/smoothness/jquery-ui.css" />

Karena ini ada di sana untuk alasan aksesibilitas, mungkin yang terbaik adalah menyembunyikannya dengan CSS.

Namun, saya menyarankan:

.ui-helper-hidden-accessible { position: absolute; left: -9999px; }

Daripada:

.ui-helper-hidden-accessible { display:none; }

Karena yang pertama akan menyembunyikan item di luar layar, tetapi masih memungkinkan pembaca layar untuk membacanya, sedangkan display:nonetidak.

Nah, pertanyaan ini sedikit lebih lama, tetapi teks tidak muncul sama sekali ketika Anda menyertakan file css yang sesuai:

<link
 rel="stylesheet"
 href="http://code.jquery.com/ui/1.9.0/themes/YOUR_THEME_HERE/jquery-ui.css" />

Tentu saja Anda harus memasukkan tema sebenarnya, bukan YOUR_THEME_HEREmisalnya "kehalusan"

Beri gaya bagaimana tema jQuery itu sendiri menatanya. Banyak dari jawaban lain menyarankan untuk menyertakan seluruh stylesheet, tetapi jika Anda hanya menginginkan CSS yang relevan, begini caranya http://code.jquery.com/ui/1.9.0/themes/smoothness/jquery-ui.css:

.ui-helper-hidden-accessible { 
    position: absolute !important; 
    clip: rect(1px 1px 1px 1px); 
    clip: rect(1px,1px,1px,1px);
}

Menambahkan kode ini tepat setelah pelengkapan otomatis di skrip Anda akan membuat helper yang mengganggu keluar dari halaman, tetapi orang yang menggunakan pembaca layar masih akan mendapatkan keuntungan darinya:

$(document).ready(function() { //pushing the autocomplete helper out of the visible page
    $(".ui-helper-hidden-accessible").css({"position": "absolute", "left":"-999em"}) //{"display","none"} will remove the element from the page
});

Saya bukan penggemar memanipulasi CSS dengan JS tetapi dalam hal ini saya pikir itu masuk akal. Kode JS menciptakan masalah di tempat pertama, dan masalah akan diselesaikan beberapa baris di bawah ini dalam file yang sama. IMO ini lebih baik daripada menyelesaikan masalah dalam file CSS terpisah yang mungkin diedit oleh orang lain yang tidak tahu mengapa kelas .ui-helper-hidden-dapat diakses dimodifikasi seperti itu.

CSS jQuery .ui-helper-hidden-diakses ada di file themes / base / core.css. Anda harus menyertakan file ini (minimal) di stylesheet Anda untuk kompatibilitas ke depan.