ปลั๊กอินการติดแท็กอัตโนมัติ jQuery เช่นแท็กอินพุตของ StackOverflow หรือไม่ [ปิด]


522

โซลูชันใดที่สำเร็จการเติมข้อความอัตโนมัติแบบเดียวกับที่ใช้ในการป้อนแท็ก

มีปลั๊กอินที่สามารถจัดการหนึ่งคำได้ แต่ฉันไม่เห็นคำใดที่จัดการได้หลายคำ


การลงคะแนนเพื่อปิดเป็นเครื่องมือการบันทึก
Ciro Santilli 郝海东冠状病六四事件法轮功

1
ฉันได้สร้างสิ่งที่ดีที่สุด - github.com/yairEO/tagify
vsync

@vsync เพิ่มไว้ในรายการในคำตอบแรก น่าเสียดายที่ไม่สามารถเชื่อมโยงโดยตรงกับ codepen.io เนื่องจากไม่มีรหัสใด ๆ ในคำตอบ
Joe Phillips

@JoePhilllips - อาจยอมรับ URL ที่สั้นลงของ Google URL
vsync

@ JoePhilllips - ปลั๊กอินของฉันดีกว่าปลั๊กอินที่ดีที่สุดบนสุดของรายการและสมควรที่จะอยู่ด้านบนและฉันมีจุดขายที่ดี ปัจจุบันหนึ่งในรายการด้านบนมีป่อง (x4 กว่าของฉัน) ใช้องค์ประกอบอินพุตพิเศษ (ไม่ดีสำหรับการทำให้เป็นอนุกรมของแบบฟอร์ม) และไม่สนับสนุนเครื่องหมายจุลภาคหรือแท็กวางกับพวกเขา มันมีคุณสมบัติบางอย่างที่ดี แต่ไม่จำเป็นสำหรับกรณีส่วนใหญ่ autocompleteควรใช้หมด IMHO
vsync

คำตอบ:


763

ใน IE9 มันจะให้ "Line: 18 ข้อผิดพลาด: วัตถุไม่สนับสนุนคุณสมบัติหรือวิธีการ 'tagit'"
Raghav

2
ใครก็ตามที่กำลังมองหาเวอร์ชันล่าสุดเอกสารและตัวอย่างที่ครอบคลุมมากขึ้นของปลั๊กอินที่น่าทึ่งนี้ควรจะมาที่นี่และแยกออกไป: github.com/aehlke/tag-it
Crisman

1
ปรับปรุง: ฉันคิดว่า magicsuggest เป็นตัวเลือกที่ดีที่สุดในขณะนี้
ssj

8
แท็กมันเกินจริง การขอ jQuery สำหรับระบบแท็กเรียบง่ายนั้นมากเกินไป แต่การใช้ jQuery UI และ jquery UI CSS นั้นเป็นสิ่งที่บ้ามากในปัจจุบัน ไม่คุ้มค่า
Alvaro

1
@scniro ฉันลงเอยด้วยการใช้jquery.tagsinputเพราะฉันไม่รังเกียจที่จะใช้ jQuery ซึ่งกำลังถูกใช้ในโครงการของฉันอยู่แล้ว ฉันแค่อยากจะขอ jQuery UI และ CSS
Alvaro

62

Bootstrap:หากคุณใช้ Bootstrap นี้เป็นหนึ่งที่ดีจริงๆ: Select2

นอกจากนี้TokenInputเป็นหนึ่งที่น่าสนใจ ครั้งแรกมันไม่ได้ขึ้นอยู่กับ jQuery-UI ที่สองการกำหนดค่าของมันราบรื่นมาก

ปัญหาเดียวที่ฉันมีมันไม่รองรับการติดแท็กฟรี ดังนั้นฉันต้องส่งเคียวรีสตริงกลับไปที่ไคลเอ็นต์เป็นส่วนหนึ่งของการตอบสนอง JSON


ตามที่ @culithay กล่าวถึงในความคิดเห็น TokenInput รองรับคุณสมบัติมากมายในการปรับแต่ง และไฮไลต์ของคุณสมบัติบางอย่างที่คนอื่นไม่มี:

  • tokenLimit: จำนวนผลลัพธ์สูงสุดที่ผู้ใช้สามารถเลือกได้ ใช้ null เพื่ออนุญาตการเลือกที่ไม่ จำกัด
  • minChars: จำนวนอักขระขั้นต่ำที่ผู้ใช้ต้องป้อนก่อนทำการค้นหา
  • queryParam: ชื่อของแบบสอบถามพารามิเตอร์ที่คุณคาดว่าจะมีคำค้นหาในฝั่งเซิร์ฟเวอร์

ขอบคุณ culithay สำหรับการป้อนข้อมูล


3
โทเค็นอินพุทดูเหมือนว่าเป็นสิ่งที่ฉันกำลังมองหา: ผู้ใช้พิมพ์ข้อมูลบางอย่างทำการค้นหาบนเซิร์ฟเวอร์ผู้ใช้สามารถเลือกองค์ประกอบการค้นหาล้างและทำซ้ำได้
Mala

1
TokenInput รองรับคุณสมบัติมากมายในการปรับแต่ง และฉันเน้นคุณลักษณะบางอย่างที่คนอื่นไม่มี - tokenLimit: จำนวนผลลัพธ์สูงสุดที่ผู้ใช้สามารถเลือกได้ ใช้ null เพื่ออนุญาตการเลือกแบบไม่ จำกัด minChars: จำนวนอักขระขั้นต่ำที่ผู้ใช้ต้องป้อนก่อนทำการค้นหา - queryParam: ชื่อของแบบสอบถามพารามิเตอร์ที่คุณคาดว่าจะมีคำค้นหาในฝั่งเซิร์ฟเวอร์
culithay

1
@culithay เพิ่มคำตอบ
Nishant

วิธีเพิ่มแท็กฟรีใหม่ด้วย: stackoverflow.com/questions/28656977/…ฮาร์ด :-(
Ciro Santilli 郝海东冠状病病六四事件法轮功

สิ่งที่ดี. ไม่สนับสนุนการติดแท็กฟรีไม่ใช่ปัญหาใหญ่เพราะสามารถเอาชนะได้ง่าย
RationalRabbit

9

เดิมนี้ตอบคำถามเสริมเกี่ยวกับภูมิปัญญาของการดาวน์โหลด jQuery เมื่อเทียบกับการเข้าถึงผ่าน CDN ซึ่งไม่มีอยู่อีกต่อไป ...

เพื่อตอบคำถามเกี่ยวกับ Google ฉันย้ายไปที่การเข้าถึง JQuery และห้องสมุดประเภทอื่น ๆ เหล่านี้ส่วนใหญ่ผ่าน CDN ที่เกี่ยวข้องในเว็บไซต์ของฉัน

เมื่อผู้คนจำนวนมากทำสิ่งนี้หมายความว่ามีแนวโน้มที่จะถูกแคชบนเครื่องของผู้ใช้มากขึ้นดังนั้นการลงคะแนนของฉันจึงเป็นสิ่งที่ดี

ในห้าปีนับตั้งแต่ฉันเสนอสิ่งนี้ครั้งแรกมันได้กลายเป็นภูมิปัญญาทั่วไป


3
เราแผ่ออกเป็นส่วนหนึ่งของเทมเพลตเริ่มต้นของเราเช่นกัน Google สามารถให้บริการรหัสนี้ซิปและออกจาก CDN เร็วกว่าเราและถ้ามีโอกาส 2% ที่ผู้เข้าชมแคชนี้จะดีกว่าไม่มีโอกาสเลย
Tom

27
นี่เป็นคำตอบของคำถามต้นฉบับอย่างไร
ดีเร็ก

3
ส่วนสุดท้าย 'นอกจากนี้ ... ' ถามว่าการเชื่อมโยงไปยังรุ่น Google เป็นความคิดที่ดีหรือไม่ดีและคำตอบของฉันคือมันเป็นความคิดที่ดีมากขึ้น
Julian

@ ดีเร็กฉันไม่คิดว่าฉันจะมีคำตอบที่ยอมรับได้เมื่อฉันถามมันในตอนแรก ที่มีการเปลี่ยนแปลงตั้งแต่
Joe Phillips



1

เราเพียงแค่เปิดมา jQuery ปลั๊กอินนี้Github: tactivos


1
แม้ว่าลิงก์นี้อาจตอบคำถามได้ดีกว่าหากรวมส่วนสำคัญของคำตอบไว้ที่นี่และให้ลิงก์สำหรับการอ้างอิง คำตอบสำหรับลิงก์อย่างเดียวอาจไม่ถูกต้อง (และลดลง) หากการเชื่อมโยงหน้าเปลี่ยนไป ดูวิธีการตอบว่าทำไมจึงมีความสำคัญ
bytebuster

3
หน้าตัวอย่างตายไปแล้ว
Edward Olamisan
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.