ดูเหมือนว่านี่จะเป็นฟีเจอร์ใหม่ใน 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.'
}
}
});
source: availableTags? ฉันลบออก แต่ก็ยังไม่มีข้อความใด ๆ
availableTagsอาจเป็นตัวแปรท้องถิ่นที่มีออบเจ็กต์ JSON ของ url เพื่อแมปคำ[{ '/tag/cats': 'Cats', etc... }]ดังนั้นเมื่อผู้ใช้พิมพ์CaCats จะปรากฏในเมนูแบบเลื่อนลงและเมื่อเลือกหรือคลิกก็สามารถเติมข้อมูลในช่องที่ซ่อนด้วย url ได้เช่นกัน
ใช้สำหรับการช่วยการเข้าถึงวิธีง่ายๆในการซ่อนมันคือ CSS:
.ui-helper-hidden-accessible { display:none; }
หรือ (ดูความคิดเห็นของ Daniel)
.ui-helper-hidden-accessible { position: absolute; left:-999em; }
left: -9999pxคุณยังสามารถใช้left: 200%(200% เมื่อเทียบกับ 100% เพียงเพื่อการบัญชีสำหรับนิสัยใจคอเบราว์เซอร์ที่เป็นไปได้ที่ 100% ไม่ได้ค่อนข้างได้รับมันปิดหน้าจอ)
คำตอบยอดนิยมที่นี่บรรลุผลภาพที่ต้องการ แต่เอาชนะวัตถุของ jQuery ที่มีการสนับสนุน ARIA และเป็นเรื่องเล็กน้อยสำหรับผู้ใช้ที่พึ่งพามัน! ผู้ที่กล่าวว่า 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;
}
คัดลอกลงในสไตล์ชีตของคุณแทนที่จะลบข้อความโปรด :)
clipคุณสมบัติเนื่องจากตอนนี้เลิกใช้งานแล้ว - ดูdeveloper.mozilla.org/en-US/docs/Web/CSS/clip
ตามบล็อกนี้ :
ตอนนี้เราใช้ ARIA live พื้นที่เพื่อประกาศเมื่อผลลัพธ์พร้อมใช้งานและวิธีดูรายการคำแนะนำ ประกาศสามารถกำหนดค่าผ่านทางตัวเลือกข้อความซึ่งมีคุณสมบัติสองอย่างคือ 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ไม่ทำ
left: -9999pxเพียงแค่ใช้left: 200%(200% เมื่อเทียบกับ 100% เพียงเพื่อการบัญชีสำหรับนิสัยใจคอเบราว์เซอร์ที่เป็นไปได้ที่ 100% ไม่ได้ค่อนข้างได้รับมันปิดหน้าจอ)
คำถามนี้เก่ากว่าเล็กน้อย แต่ข้อความไม่ปรากฏขึ้นเลยเมื่อคุณรวมไฟล์ 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
});
ฉันไม่ใช่แฟนของการจัดการ CSS ด้วย JS แต่ในกรณีนี้ฉันคิดว่ามันสมเหตุสมผล รหัส JS สร้างปัญหาตั้งแต่แรกและปัญหาจะได้รับการแก้ไขสองสามบรรทัดด้านล่างในไฟล์เดียวกัน IMO ดีกว่าการแก้ปัญหาในไฟล์ CSS แยกต่างหากซึ่งอาจถูกแก้ไขโดยคนอื่นที่ไม่ทราบว่าทำไมคลาส. UI-helper-hidden-access จึงถูกแก้ไขด้วยวิธีนี้
left: -9999pxเพียงแค่ใช้left: 200%(200% เมื่อเทียบกับ 100% เพียงเพื่อการบัญชีสำหรับนิสัยใจคอเบราว์เซอร์ที่เป็นไปได้ที่ 100% ไม่ได้ค่อนข้างได้รับมันปิดหน้าจอ)
jQuery CSS .ui-helper-hidden-access อยู่ในไฟล์ themes / base / core.css คุณควรรวมไฟล์นี้ (อย่างน้อยที่สุด) ในสไตล์ชีตของคุณเพื่อความเข้ากันได้ในการส่งต่อ