JQuery UI 자동 완성 도우미 텍스트를 제거 / 변경하는 방법은 무엇입니까?

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

또는 (아래 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;
}

메시지를 제거하는 대신 스타일 시트에 복사하십시오. :).

---

이 블로그 에 따르면 :

We now use ARIA live regions to announce when results become available and how to navigate through the list of suggestions. The announcements can be configured via the messages option, which has two properties: noResults for when no items are returned and results for when at least one item is returned. In general, you would only need to change these options if you want the string to be written in a different language. The messages option is subject to change in future versions while we work on a full solution for string manipulation and internationalization across all plugins. If you’re interested in the messages option, we encourage you to just read the source; the relevant code is at the very bottom of the autocomplete plugin and is only a few lines.

...

So how does this apply to the autocomplete widget? Well, now when you search for an item, if you have a screen reader installed it will read you something like “1 result is available, use up and down arrow keys to navigate.”. Pretty cool, huh?

So if you go to github and look at the autocomplete source code, around line 571 you'll see where this is actually implemented.

---

Adding the jquery css also worked to remove the instructional text.

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

---

Since this is in there for accessibility reasons it's probably best to hide it with CSS.

However, I would suggest:

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

Rather than:

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

As the former will hide the item off-screen, but still allow screen-readers to read it, whereas display:none does not.

---

Well, this question is a bit older, but the text does not show up at all when you include the according css file:

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

Of course you have to insert an actual theme instead of YOUR_THEME_HERE e.g. "smoothness"

---

Adding this code right after the autocomplete in your script will push the annoying helper off the page, but the people using screen readers will still benefit from it:

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

I'm not a fan of manipulating CSS with JS but in this case I think it makes sense. The JS code created the problem in the first place, and the problem will be solved a few lines below in the same file. IMO this is better than solving the problem in a separate CSS file which might be edited by other people who don't know why the .ui-helper-hidden-accessible class was modified that way.

---

Style it how the jQuery theme itself styles it. A lot of the other answers suggest including a whole stylesheet, but if you just want the relevant CSS, this is how it's done in 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);
}

---

The jQuery CSS .ui-helper-hidden-accessible is in the themes/base/core.css file. You should include this file (at a minimum) in your stylesheets for forward compatibility.

참고URL : https://stackoverflow.com/questions/13011127/how-to-remove-change-jquery-ui-autocomplete-helper-text