jQuery plug-in penandaan autocomplete seperti tag input StackOverflow? [Tutup]

523

Solusi apa yang menyelesaikan pelengkapan otomatis yang sama yang digunakan SO untuk memasukkan tag?

Ada beberapa plugin yang dapat menangani satu kata tetapi saya belum melihat ada yang menangani beberapa kata.

jquery autocomplete tags Joe Phillips
sumber
Voting untuk ditutup sebagai alat rek.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
1
Saya telah menciptakan yang terbaik - github.com/yairEO/tagify
vsync
@ vsync Menambahkannya ke daftar di jawaban pertama. Sayangnya tidak dapat menautkan langsung ke codepen.io karena tidak memiliki kode dalam jawabannya
Joe Phillips
@JoePhilllips - mungkin itu akan menerima yang singkat URL Google
vsync
@ JoPhilllips - Plugin saya lebih baik daripada yang terbaik di bagian atas daftar, dan layak berada di atas dan saya punya nilai jual yang bagus untuk itu. saat ini yang paling atas dalam daftar adalah kembung (x4 dari milik saya), menggunakan elemen input tambahan (buruk untuk serialisasi formulir) dan tidak mendukung tanda koma atau menempelkan tag. itu memang menawarkan beberapa fitur yang bagus tetapi tidak dibutuhkan untuk kebanyakan kasus. autocompleteharus digunakan dengan putus asa IMHO
vsync

Jawaban:

763

Dalam urutan aktivitas, demo / contoh tersedia, dan kesederhanaan:

Terkait:

Dmitriy Nesteryuk
sumber
Pada IE9 ia memberikan "Baris: 18 Kesalahan: Objek tidak mendukung properti atau metode 'tagit'"
Raghav
2
Siapa pun yang mencari versi terbaru, dokumentasi, dan contoh yang lebih luas dari plugin yang luar biasa ini harus pergi ke sini dan pergi: github.com/aehlke/tag-it
Crisman
1
pembaruan: Saya pikir saran magics adalah pilihan terbaik sekarang.
ssj
8
tag-itu dilebih-lebihkan. Membutuhkan jquery untuk sistem tag yang sederhana terlalu banyak, tetapi membutuhkan juga jQuery UI dan jquery UI CSS baru-baru ini gila. Tidak layak.
Alvaro
1
@scniro Saya akhirnya menggunakan jquery.tagsinput karena saya tidak keberatan menggunakan jQuery yang sudah digunakan dalam proyek saya. Saya hanya gila untuk meminta UI jquery dan CSS.
Alvaro
62

Bootstrap: Jika Anda menggunakan Bootstrap. Ini sangat bagus: Select2

Juga, TokenInput adalah yang menarik. Pertama, itu tidak bergantung pada jQuery-UI, kedua konfigurasi nya sangat halus.

Satu-satunya masalah yang saya miliki tidak mendukung pemberian tag gratis secara asli. Jadi, saya harus mengembalikan kueri-string kembali ke klien sebagai bagian dari respons JSON.

Seperti @culithay disebutkan dalam komentar, TokenInput mendukung banyak fitur untuk dikustomisasi. Dan sorot beberapa fitur yang tidak dimiliki yang lain:

  • tokenLimit: Jumlah maksimum hasil yang diizinkan untuk dipilih oleh pengguna. Gunakan null untuk mengizinkan pemilihan tanpa batas
  • minChars: Jumlah minimum karakter yang harus dimasukkan pengguna sebelum pencarian dilakukan.
  • queryParam: Nama param kueri yang Anda harapkan mengandung istilah pencarian di sisi server

Terima kasih culithay untuk masukannya.

Nishant
sumber
3
TokenInput sepertinya persis seperti yang saya cari: pengguna mengetik beberapa barang, melakukan pencarian di server, pengguna dapat memilih elemen yang dicari, bilas dan ulangi.
Mala
1
TokenInput mendukung banyak fitur untuk disesuaikan. Dan saya menyoroti beberapa fitur yang tidak dimiliki yang lain. - tokenLimit: Jumlah maksimum hasil yang diizinkan untuk dipilih oleh pengguna. Gunakan null untuk mengizinkan pemilihan tanpa batas - minChars: Jumlah minimum karakter yang harus dimasukkan pengguna sebelum pencarian dilakukan. - queryParam: Nama param kueri yang Anda harapkan mengandung istilah pencarian di sisi server
culithay
1
@culithay ditambahkan ke jawaban
Nishant
Bagaimana cara menambahkan tag gratis baru dengannya: stackoverflow.com/questions/28656977/... Hard :-(
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功 法轮功
Bagus Tidak mendukung pemberian tag gratis bukanlah masalah besar, karena dapat dengan mudah diatasi.
RationalRabbit
9

Ini awalnya menjawab pertanyaan tambahan tentang kebijaksanaan mengunduh jQuery dibandingkan mengaksesnya melalui CDN, yang tidak lagi ada ...

Untuk menjawab hal tentang Google. Saya telah pindah ke mengakses JQuery dan sebagian besar dari jenis perpustakaan ini melalui CDN yang sesuai di situs saya.

Karena semakin banyak orang melakukan ini berarti lebih besar kemungkinannya untuk di-cache pada mesin pengguna, jadi suara saya cocok untuk ide bagus.

Dalam lima tahun sejak saya pertama kali menawarkan ini, sudah menjadi kebijaksanaan umum.

Julian
sumber
3
Kami meluncurkan ini sebagai bagian dari template default kami juga. Google dapat menyajikan kode ini di-zip dan keluar dari CDN lebih cepat dari kami, ditambah jika ada peluang 2% bahwa pengunjung memiliki cache ini lebih baik daripada tidak ada kesempatan sama sekali.
Tom
27
Bagaimana ini jawaban untuk pertanyaan awal?
Derek
3
Bagian terakhir 'Juga, ...' menanyakan apakah menautkan ke versi Google adalah ide yang baik atau buruk, dan jawaban saya adalah bahwa itu adalah ide yang semakin baik.
Julian
@ Serek Saya tidak berpikir saya punya jawaban lain yang dapat diterima ketika saya awalnya menanyakannya. Sejak itu telah berubah.
Joe Phillips
1

Kami baru saja membuka sumber jquery plug-in Github ini: tactivos / jquery-sew .

pengguna1880508
sumber
1
Meskipun tautan ini dapat menjawab pertanyaan, lebih baik untuk memasukkan bagian-bagian penting dari jawaban di sini dan memberikan tautan untuk referensi. Jawaban hanya tautan dapat menjadi tidak valid (dan downvoted) jika halaman tertaut berubah. Lihat Bagaimana Menjawab mengapa itu penting.
bytebuster
3
Halaman demo sudah mati.
Edward Olamisan