Come rimuovere/modificare il testo di aiuto completamento automatico UI JQuery?

Question

Sembra che questa sia una nuova funzionalità in JQuery UI 1.9.0, perché ho usato l'interfaccia utente di JQuery molte volte prima e questo testo non è mai stato visualizzato.

Impossibile trovare nulla correlato nella documentazione dell'API.

Quindi, utilizzando un esempio di completamento automatico base con fonte locale

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

Quando la ricerca corrisponde mostra questo correlate testo aiutante:

'1 risultato è disponibile, utilizzare su e giù tasti freccia navigare.'

Come posso disabilitarlo in un modo carino, non rimuovendolo con i selettori JQuery.

Answer 1

So che questo è stato asnwered ma volevo solo per dare un esempio di implementazione:

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

Answer 2

Secondo this blog:

Ora usiamo ARIA regioni dal vivo di annunciare quando i risultati saranno disponibili e su come navigare attraverso l'elenco di suggerimenti. Gli annunci possono essere configurati tramite l'opzione messaggi, che ha due proprietà: noResults per quando non viene restituito alcun elemento e i risultati relativi a quando almeno viene restituito un articolo. In generale, è necessario modificare queste opzioni se si desidera che la stringa venga scritta in una lingua diversa. L'opzione messaggi è soggetta a modifiche nelle versioni future mentre noi lavoriamo su una soluzione completa per la manipolazione delle stringhe e l'internazionalizzazione attraverso tutti i plugin. Se sei interessato all'opzione messaggi , ti invitiamo a leggere la fonte; il codice rilevante si trova nella parte inferiore del plug-in di completamento automatico ed è solo poche righe.

...

Così come si applica al widget autocomplete? Bene, ora quando fai una ricerca per un articolo, se hai installato uno screen reader, leggerà qualcosa come "1 risultato è disponibile, usa i tasti freccia su e giù per navigare.". Molto carino, eh?

Quindi se andate a github e guardate lo autocomplete source code, attorno alla linea 571 vedrete dove questo è effettivamente implementato.

Answer 3

Viene utilizzato per l'accessibilità, un modo semplice per nasconderlo è con i CSS:

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

Or (vedi il commento di Daniel qui sotto)

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

Answer 4

Poiché questo è lì per motivi di accessibilità, probabilmente è meglio nasconderlo con i CSS.

Tuttavia, vorrei suggerire:

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

Piuttosto che:

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

Come l'ex nasconderà la voce fuori campo, ma ancora consentire screen-lettori di leggere che, mentre display:none non.

Answer 5

Beh, questa domanda è un po 'più vecchio, ma il testo non si presenta affatto quando si include il file css secondo:

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

Naturalmente è necessario inserire un tema attuale, invece di YOUR_THEME_HERE esempio "levigatezza"

Answer 6

L'aggiunta del css jquery ha funzionato anche per rimuovere il testo di istruzioni.

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

Answer 7

La risposta superiore qui raggiunge l'effetto visivo desiderato, ma sconfigge l'oggetto di jQuery avere supporto ARIA, ed è un po 'dickish per gli utenti che fanno affidamento su di essa! Coloro che hanno detto che jQuery CSS nasconde questo per lei ha ragione, e questo è lo stile che fa questo:

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

copia che nel vostro foglio di stile invece di rimuovere il messaggio, :).

Answer 8

Stile come il tema jQuery stesso lo elabora. Un sacco di altre risposte suggeriscono di inserire un intero foglio di stile, ma se si desidera solo il CSS, questo è come si fa a 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); 
} 

Answer 9

Il CSS jQuery .ui-helper-nascosto-accessibile è in theme/base/core.css file. Dovresti includere questo file (come minimo) nei tuoi fogli di stile per la compatibilità diretta.

Answer 10

L'aggiunta di questo codice subito dopo il completamento automatico nello script spingerà l'aiutante fastidioso fuori dalla pagina, ma le persone che utilizzano screen reader potranno ancora beneficiare di essa:

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

io non sono un fan di manipolazione CSS con JS ma in questo caso penso che abbia senso. Il codice JS ha creato il problema in primo luogo, e il problema verrà risolto con poche righe sotto nello stesso file. IMO è meglio che risolvere il problema in un file CSS separato che potrebbe essere modificato da altre persone che non sanno perché la classe accessibile .ui-helper-hidden è stata modificata in questo modo.