JQuery UI Autocomplete Helperテキストを削除/変更する方法は？

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

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

そこで、ローカルソースを使った基本的なオートコンプリートの例として

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

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

'1件ヒットしました、上下矢印キーで移動してください。

JQueryのセレクタで削除するのではなく、いい感じに無効化するにはどうしたらいいでしょうか。

プログラミング
autocomplete javascript jquery jquery-ui
22日 10月 2012 в 12:07
7 ビュー
質問へのコメント (4)
ソリューション

すでに回答があるようですが、一応、実装例を挙げておきます。

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

$("#find-subj").autocomplete({
    source: availableTags,
    messages: {
        noResults: 'no results',
        results: function(amount) {
            return amount + 'results.'
        }
    }
});
2pha
編集した答え 1日 10月 2019 в 6:25
解説 (7)

これはアクセシビリティのために使用されるもので、簡単に非表示にする方法はCSSを使用することです。

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

または（下のDaniel'のコメントを参照してください。）

.ui-helper-hidden-accessible { position: absolute; left:-999em; }
Bertrand
編集した答え 27日 2月 2014 в 4:34
解説 (3)

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

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

解説 (1)

このブログ]1によると。

ARIAのライブリージョンを使用して、結果が利用可能になったことをお知らせするようになりました。

そして、提案のリストをどのようにナビゲートするか。アナウンス メッセージオプションで設定でき、2つのプロパティがあります。 noResultsはアイテムが返されない場合、resultsは少なくともアイテムが返される場合です。 gt;1つの項目が返されます。一般的には、これらの 文字列を別の言語で書きたい場合は、> オプションを使用します。 メッセージのオプションは、今後のバージョンで変更される可能性があります。 文字列操作のための完全なソリューションと すべてのプラグインで国際化を実現します。もし、あなたが メッセージのオプションは、ソースを読んでください。 関連するコードはオートコンプリートプラグインの一番下にあります。 わずか数行です。

...

では、オートコンプリートウィジェットにどのように適用するのでしょうか？さて、これで スクリーンリーダーがインストールされている場合、項目を検索すると、次のように表示されます。 1件の結果があります。 をクリックすると移動します。かなりクールでしょう？

githubのautocomplete source codeの571行目あたりに、実際に実装されている部分がありますね。

Pavel V.
編集した答え 18日 3月 2016 в 9:56
解説 (0)

jquery cssを追加すると、命令テキストを削除することもできます。

解説 (1)

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

ただし、以下をお勧めします。

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

ではなく:

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

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

解説 (1)

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

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

解説 (0)

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);
}
解説 (0)

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

$(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ヘルパー非表示のアクセス可能なクラスがそのように変更された理由を知らない他の人々によって編集される可能性がある別のCSSファイルで問題を解決するよりも優れています。

解説 (2)

jQuery CSS .ui-helper-hidden-accessibleは、themes / base /core.cs sファイルにあります。 順方向互換性のために、このファイルを(少なくとも)スタイルシートに含める必要があります。

解説 (0)