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


94

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.


1
Bunu hangi tarayıcıda görüyorsunuz? jquery ui web sitesinde aynı diyaloğu görebiliyor
musunuz

2
Bunu hiç görmedim, bir kemancı veya ek bir kod sağlayabilir misiniz, böylece daha fazla inceleyebiliriz?
zmanc

1
Benim için sorun şu konumdu: göreceli, erişilebilirlik öğelerinin görüntülendiği aralık için geçersiz kılınıyordu ... "! önemli"
kelimesini

Şüphen zamanımı kurtardı. Bu nedenle size +1 :-)
Ashok kumar

Yanıtlar:


151

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

4
Bunu denedim ve aynı yere "null" dizesini koydu. Çözüm şu şekilde değiştirmektir: noResults: "ve hiçbir mesaj almayacaksınız.
Patrick

2
NoResults ile benim için çalıştı: ''. Api.jqueryui.com'da neden belgelenmediğini merak ediyorum
Niels Steenbeek

Ne olduğundan emin değil source: availableTagsmisiniz? Onu kaldırdım ve hala mesajım yok.
Chuck Le Butt

3
@Django Reinhardt, OP'nin sorusundaki örnekten kopyalanmış. Kaynak, otomatik tamamlama verilerinin nereden geldiğini tanımlar. Örneğin availableTags, URL'den kelime eşlemesine bir JSON nesnesi içeren yerel bir değişken olabilir. [{ '/tag/cats': 'Cats', etc... }]Dolayısıyla, kullanıcı yazdığında Ca, açılır menüde Kediler görünecektir ve seçildiğinde veya tıklandığında, örneğin URL ile gizli bir alanı doldurabilir.
TK123

1
Çok teşekkürler. Bu, API Belgelerinde bulunamadı.
Chorinator

86

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

5
Dediğiniz gibi, erişilebilirlik için kullanılır, böylece ekran okuyucusu olan kişiler widget'ı daha iyi anlayabilir. Display: none; ekran okuyuculardan da gizlersiniz. Ekrandan şu konumla hareket ettirmek daha iyidir: absolte; sol: -999em;
Daniel Göransson

Yerine left: -9999px, ayrıca kullanabilirsiniz left: 200%(% 100 olmayan herhangi olası tarayıcı tuhaflıklar için sadece hesaba% 100 karşı 200% oldukça ekranın dışına olsun).
jbyrd

23

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 :).


1
2019 güncellemesi: clipartık kullanımdan kaldırıldığı için özelliği kullanmayın - bkz. Developer.mozilla.org/en-US/docs/Web/CSS/clip
jbyrd

17

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.


11

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" />

Benim için de çalıştı.
Indika K

4

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.


Bunun yerine, left: -9999pxkullanın left: 200%(% 100'ün ekrandan tam olarak çıkmadığı olası tarayıcı tuhaflıklarını hesaba katmak için% 200'e% 100 ).
jbyrd

2

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.


1

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

1

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.


1
Bu sorunu çözmek için sonsuza dek aradım ve çözümünüz işe yaradı.
Timothy G.

Bunun yerine, left: -9999pxkullanın left: 200%(% 100'ün ekrandan tam olarak ayrılmadığı olası tarayıcı tuhaflıklarını hesaba katmak için% 200'e% 100 ).
jbyrd

0

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.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.