如何刪除/更改JQuery UI自動完成助手文本？

看來，這是JQuery UI 1.9.0中的一個新功能，因爲我之前使用過JQuery UI很多次，而且這段文字從未加入過。如何刪除/更改JQuery UI自動完成助手文本？

在API文檔中找不到任何相關內容。

因此使用具有本地源的基本自動完成例如

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

當搜索匹配時，顯示此相關幫助文檔：

「1分的結果，則用上下箭頭鍵導航。'

如何以非常好的方式禁用它，而不是通過使用JQuery選擇器刪除它。

來源

2012-10-22 alex.dominte

您在哪個瀏覽器中看到這個？你能看到相同的對話框在jquery ui網站 – fuzionpro

我從來沒有見過這個，你可能提供一個提琴手或一些額外的代碼，所以我們可以看看它更多？ – zmanc

對我來說問題是那個位置：相對，正被覆蓋的可訪問性顯示的跨度...我剛剛添加「！重要」，現在我可以保持無障礙 – iKode

142

我知道這已經asnwered但只是想給一個實現的例子：

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

來源

2012-10-26 17:23:32 TK123

我試過這個，它把字符串「null」放在同一個地方。解決方法是更改爲：noResults：''，並且根本不會收到任何消息。 – Patrick

爲我工作沒有結果：''。不知道爲什麼它沒有記錄在api.jqueryui.com –

不知道什麼'源：availableTags'呢？我刪除了它，但仍然沒有消息。 –

根據this blog：

我們現在使用ARIA實時區域公佈結果時可用以及如何通過的建議列表進行瀏覽。公告可通過消息選項進行配置，消息選項具有兩個屬性： no沒有返回項目時的結果，並返回至少返回一個項目的的結果。一般而言，如果您希望以不同語言編寫字符串，則只需更改這些選項。消息選項在未來的版本中可能會發生變化，而我們跨所有插件的字符串操作和國際化的完整解決方案。如果您對消息選項感興趣，我們鼓勵您閱讀源代碼; 的相關代碼位於自動完成插件的最底部，並且只有幾行，即。

...

那麼這是如何應用到自動完成構件？那麼，現在當你搜索一個項目，如果你安裝了一個屏幕閱讀器，它會讀取你有點像「1結果可用，使用向上和向下箭頭鍵導航。」。很酷，是吧？

所以，如果你去github，看看autocomplete source code，在571行左右，你會看到這是實際實現的。

來源

2012-10-22 15:19:24 j08691

這是用於輔助功能，一個簡單的方法來隱藏它與CSS：

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

或者（見丹尼爾的評論以下）

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

來源

2012-11-13 14:15:53 Bema

這種方法爲我工作。謝謝 – sica07

正如您所說，它用於無障礙，因此使用屏幕閱讀器的人可以更好地理解小部件。通過使用display：none;你也可以將它從屏幕閱讀器中隱藏起來。更好地移動它的屏幕位置：absolte;左：-999em; –

好點@DanielGöransson！ – Bema

由於這是出於可訪問性的原因，它可能最好用CSS隱藏它。

不過，我建議：

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

不是：

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

由於前會隱藏關屏的項目，但仍允許屏幕閱讀器來閱讀，而display:none纔不是。

來源

2013-06-11 14:39:50

嗯，這個問題是有點老，但文字並不在所有當你包括根據css文件顯示：

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

當然，你必須插入一個實際的主題，而不是YOUR_THEME_HERE例如「平滑」

來源

2013-08-02 18:03:31

添加jquery css也努力刪除教學文本。

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

來源

2013-08-22 17:24:12 user2708344

也爲我工作。 –

這裏的最佳答案達到了預期的視覺效果，但是卻擊敗了擁有ARIA支持的jQuery的對象，對於依賴它的用戶來說有點不對勁！這些誰曾提到jQuery的CSS隱藏這個你是正確的，這是做的樣式：

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

將複製到您的樣式表中移除該消息，請:)代替。

來源

2013-09-05 13:58:02

樣式它是如何jQuery主題自己的樣式。很多其他的答案的建議，包括整個樣式表，但是如果你只是想相關的CSS，這是它是如何在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); 
}

來源

2015-03-06 09:14:59 dKen

jQuery的CSS的.ui輔助隱藏訪問的是在themes/base/core.css文件。爲了向前兼容，您應該在樣式表中包含此文件（至少）。

來源

2017-01-24 18:10:17 paulz

添加此代碼腳本將推動惱人的助手在頁面的自動完成之後，但使用屏幕閱讀器的人還是會從中受益：

$(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與JS，但在這種情況下，我認爲這是有道理的。 JS代碼首先創建了這個問題，並且問題將在同一個文件中的幾行下解決。 IMO比在單獨的CSS文件中解決問題要好得多，該文件可能由不知道爲什麼可以通過這種方式修改.ui-helper-hidden-accessible類的其他人編輯。

來源

2017-07-21 14:19:28

我一直在尋找永久試圖解決這個問題，你的解決方案工作。 –

如何刪除/更改JQuery UI自動完成助手文本？

回答

相關問題