JQuery UIオートコンプリートヘルパーテキストを削除/変更するにはどうすればよいですか？

これはJQuery UI 1.9.0の新機能のようです。以前JQuery UIを何度も使用したため、このテキストがポップアップすることはありませんでした。

APIドキュメントに関連するものは何も見つかりませんでした。

ローカルソースで基本的なオートコンプリートの例を使用する

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

検索が一致すると、次の関連するヘルパーテキストが表示されます。

「1つの結果が利用可能です。上下の矢印キーを使用してナビゲートしてください。」

JQueryセレクターで削除するのではなく、適切な方法で無効にするにはどうすればよいですか。

私はこれが守られてきたことを知っていますが、実装例を挙げたかっただけです：

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

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

これはアクセシビリティに使用されます。CSSを使用すると簡単に非表示にできます。

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

または（ダニエルのコメントを参照してください）

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

ここでの一番上の答えは、望ましい視覚効果を実現しますが、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;
}

メッセージを削除する代わりに、それをスタイルシートにコピーしてください:)。

このブログによると：

現在は、ARIAライブリージョンを使用して、結果が利用可能になった時期と、提案のリストをナビゲートする方法を発表しています。アナウンスは、メッセージオプションを介して設定できます。このオプションには、アイテムが返されない場合のnoResultsと、少なくとも1つのアイテムが返された場合の結果の2つのプロパティがあります。一般に、これらのオプションを変更する必要があるのは、文字列を別の言語で記述したい場合だけです。メッセージオプションは、すべてのプラグインにわたる文字列操作と国際化のための完全なソリューションに取り組んでいる間、将来のバージョンで変更される可能性があります。メッセージオプションに興味がある場合は、ソースを読むことをお勧めします。関連するコードはオートコンプリートプラグインの最下部にあり、ほんの数行です。

...

では、これはオートコンプリートウィジェットにどのように適用されるのでしょうか。さて、アイテムを検索すると、スクリーンリーダーがインストールされている場合、「1つの結果が表示されます。上下の矢印キーを使用して移動します。」のようなメッセージが表示されます。かっこいいですよね？

したがって、githubに移動してオートコンプリートのソースコードを見ると、571行目で実際に実装されている場所がわかります。

jquery cssを追加することで、説明テキストを削除することもできました。

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

これはアクセシビリティの理由でそこにあるので、CSSで非表示にするのがおそらく最善です。

しかし、私はお勧めします：

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

のではなく：

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

前者はアイテムを画面外に非表示にしますが、スクリーンリーダーはそれを読むことdisplay:noneができますが、そうはしません。

さて、この質問は少し古いですが、対応するcssファイルを含めると、テキストはまったく表示されません。

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

もちろん、YOUR_THEME_HERE例えば「滑らかさ」の代わりに実際のテーマを挿入する必要があります

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

スクリプトのオートコンプリートの直後にこのコードを追加すると、厄介なヘルパーがページから押し出されますが、スクリーンリーダーを使用しているユーザーは、それでもメリットがあります。

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

私はJSでCSSを操作するのが好きではありませんが、この場合は理にかなっていると思います。JSコードが最初に問題を作成しました。この問題は、同じファイルの以下の数行で解決されます。IMOこれは、.ui-helper-hidden-accessibleクラスがそのように変更された理由を知らない他の人々によって編集される可能性がある別のCSSファイルで問題を解決するよりも優れています。

jQuery CSS .ui-helper-hidden-accessibleは、themes / base / core.cssファイルにあります。上位互換性を保つために、このファイルを（少なくとも）スタイルシートに含める必要があります。