JQuery UI Autocomplete Helper metni nasıl kaldırılır / değiştirilir?

Görünüşe göre bu JQuery UI 1.9.0'daki yeni bir özellik, çünkü daha önce JQuery UI'yi birçok kez kullandım ve bu metin hiç açılmadı.

API belgelerinde ilgili hiçbir şey bulunamadı.

Dolayısıyla, yerel kaynakla temel bir otomatik tamamlama örneği kullanarak

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

Arama eşleştiğinde, bu ilgili yardımcı metni gösterir:

'1 sonuç mevcut, gezinmek için yukarı ve aşağı ok tuşlarını kullanın.'

JQuery seçicilerle kaldırarak değil, güzel bir şekilde nasıl devre dışı bırakabilirim.

Bunun sorulduğunu biliyorum ama sadece bir uygulama örneği vermek istedim:

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

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

Bu, erişilebilirlik için kullanılır, gizlemenin kolay bir yolu CSS ile mümkündür:

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

Veya (aşağıdaki Daniel'in yorumuna bakın)

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

Buradaki en iyi cevap, istenen görsel efekti elde eder, ancak ARIA desteğine sahip jQuery nesnesini yener ve ona güvenen kullanıcılar için biraz çirkinleşir! JQuery CSS'nin bunu sizin için gizlediğinden bahsedenler doğrudur ve bunu yapan stil şudur:

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

Mesajı kaldırmak yerine stil sayfanıza kopyalayın, lütfen :).

Bu bloga göre :

Artık sonuçların ne zaman hazır olacağını ve öneriler listesinde nasıl gezinileceğini duyurmak için ARIA canlı bölgeleri kullanıyoruz. Duyurular, iki özelliğe sahip mesajlar seçeneği aracılığıyla yapılandırılabilir: noResults, hiçbir öğe döndürülmediğinde ve en az bir öğe döndürüldüğünde sonuçlar. Genel olarak, dizenin farklı bir dilde yazılmasını istiyorsanız, bu seçenekleri yalnızca değiştirmeniz gerekir. Tüm eklentilerde dize manipülasyonu ve uluslararasılaştırma için tam bir çözüm üzerinde çalışırken, mesajlar seçeneği gelecekteki sürümlerde değişebilir. Mesaj seçeneğiyle ilgileniyorsanız, yalnızca kaynağı okumanızı öneririz; ilgili kod, otomatik tamamlama eklentisinin en altındadır ve yalnızca birkaç satırdır.

...

Peki bu, otomatik tamamlama widget'ına nasıl uygulanır? Pekala, şimdi bir öğeyi aradığınızda, yüklü bir ekran okuyucunuz varsa, size "1 sonuç var, gezinmek için yukarı ve aşağı ok tuşlarını kullanın" gibi bir şey okuyacaktır. Oldukça havalı, ha?

Yani github'a gidip otomatik tamamlama kaynak koduna bakarsanız, satır 571 civarında bunun gerçekte nerede uygulandığını göreceksiniz.

Jquery css eklenmesi de eğitici metni kaldırmak için çalıştı.

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

Bu, erişilebilirlik nedeniyle içeride olduğundan, muhtemelen CSS ile gizlemek en iyisidir.

Ancak şunu öneririm:

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

Ziyade:

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

Birincisi öğeyi ekran dışında gizleyecektir, ancak yine de ekran okuyucularının okumasına izin verirken display:none, bunu yapmaz.

Bu soru biraz daha eski, ancak uygun css dosyasını eklediğinizde metin hiç görünmüyor:

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

Elbette, YOUR_THEME_HEREörneğin "pürüzsüzlük" yerine gerçek bir tema eklemelisiniz.

JQuery temasının stilini belirleyin. Diğer cevapların çoğu bir stil sayfası eklemeyi öneriyor, ancak yalnızca ilgili CSS'yi istiyorsanız, şu şekilde yapılır 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);
}

Komut dosyanızdaki otomatik tamamlamadan hemen sonra bu kodu eklemek, can sıkıcı yardımcıyı sayfadan uzaklaştırır, ancak ekran okuyucu kullanan kişiler yine de bundan faydalanacaktır:

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

CSS'yi JS ile değiştirme hayranı değilim, ancak bu durumda mantıklı olduğunu düşünüyorum. JS kodu problemi ilk etapta yarattı ve problem aynı dosyada birkaç satırın altında çözülecek. IMO bu, sorunu .ui-helper-hidden-access sınıfının neden bu şekilde değiştirildiğini bilmeyen diğer kişiler tarafından düzenlenebilecek ayrı bir CSS dosyasında çözmekten daha iyidir.

JQuery CSS .ui-helper-hidden-access, temalar / base / core.css dosyasındadır. İleriye dönük uyumluluk için bu dosyayı (en azından) stil sayfalarınıza eklemelisiniz.