JQuery UI Autocomplete Helper 텍스트를 제거 / 변경하는 방법은 무엇입니까?

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

또는 (아래 Daniel의 의견 참조)

.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 개의 결과를 사용할 수 있습니다. 위쪽 및 아래쪽 화살표 키를 사용하여 탐색하십시오."와 같은 메시지가 표시됩니다. 꽤 멋지죠?

따라서 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 파일에 있습니다. 이후 버전과의 호환성을 위해 최소한이 파일을 스타일 시트에 포함해야합니다.