Jadi, anda mahu membina ciri @mention AutoComplete?

AutoComplete adalah ciri yang biasa: ketik ke dalam kotak carian, dan cadangan muncul. Walaupun biasa dalam e-dagang, penggunaannya sebagai peningkatan menaip sering diabaikan.

Aplikasi web moden bergerak melampaui kawasan teks mudah. Platform sosial dan produktiviti seperti Twitter, Slack, dan tanggapan menggunakan corak "@mention", yang membolehkan pengguna merujuk orang lain menggunakan pencetus seperti "@" atau "#". Ini meningkatkan pengalaman menaip dengan menyediakan panel cadangan, yang membolehkan rujukan cepat tanpa meninggalkan papan kekunci.

Corak ini meningkatkan konsistensi dalam kandungan yang dihasilkan oleh pengguna. Hashtags, misalnya, membuat data separa berstruktur dalam teks bentuk bebas, membantu pengkategorian kandungan. Mentions Membuat graf sambungan di seluruh sumber aplikasi, memudahkan cadangan kandungan dan analisis tingkah laku pengguna.

Lihat Demo Langsung Lihat Bagaimana Kami Membinanya ### Kerajinan @mentions Berkesan

Autocomplete @mention yang berjaya harus lancar. Ia bertindak sebagai pembantu yang membantu, belajar semasa anda menaip, tetapi mengetahui kapan hendak mengetepikan. Pengguna boleh mengabaikan cadangan atau menggunakannya dengan mudah untuk melengkapkan input mereka.

Pelaksanaan Twitter menutup panel apabila perkataan yang ditaip tidak lagi menjadi token yang sah (contohnya, selepas ruang, sebagai pemegang tidak mengandungi ruang). Pendekatan Slack lebih fleksibel, membolehkan ruang untuk carian penuh, menggunakan heuristik yang berbeza untuk mengesan niat pengguna.

Apabila pemilihan, Twitter menutup panel, memasukkan sebutan, dan menambah ruang untuk menaip berterusan. Ini terperinci kecil menyumbang kepada pengalaman pengguna cecair.

Sebutan, sekali ditambah, menjadi interaktif. Di Twitter, mengklik atau menggunakan kekunci anak panah untuk memilih menyebut semula panel, yang membolehkan penyuntingan dan memastikan pemberitahuan yang betul apabila menghantar.

Perpustakaan Autocomplete sumber terbuka memudahkan proses ini. Walaupun sesuai untuk Algolia, ia berfungsi dengan mana-mana sumber data dan memudahkan bangunan pelbagai sumber, ciri-ciri autokomplete yang boleh diakses.

Menggabungkan jenis cadangan

Menggunakan simbol yang berbeza (misalnya, "@" untuk orang, "#" untuk hashtags) berfungsi dengan baik dengan beberapa jenis yang jelas. Walau bagaimanapun, dengan jenis yang lebih banyak atau kurang berbeza, pengguna mungkin berjuang untuk mengingati semua simbol.

Carian bersekutu (multi-source) membolehkan untuk memberikan pelbagai jenis setiap simbol, meningkatkan penemuan tanpa pengguna yang luar biasa dengan pelbagai corak.

Slack mencampur cadangan, membezakannya secara visual (ikon, lencana). Cadangan kumpulan tanggapan mengikut jenis (tarikh, orang, pautan), mempromosikan konsistensi dan memori otot pengguna. Pengumpulan ini boleh dicapai melalui pertanyaan atau alat pelbagai sumber seperti API Reshape AutoComplete.

Pandangan juga menggunakan ruang letak dinamik, cadangan ramalan yang dikemas kini sebagai pelayaran pengguna, menjelaskan tindakan yang berkaitan dengan setiap cadangan. Mereka bijak menggunakan sifat adat CSS dan JavaScript untuk mencapai matlamat ini.

Menguruskan bilangan hasil dari pelbagai sumber boleh mencabar. Panel ketinggian tetap dengan bar skrol atau menggunakan mekanisme menggabungkan/mengehadkan (seperti API Reshape AutoComplete) boleh menangani ini.

Memperluas Carian Asas

Fleksibiliti corak @mention melangkaui pelaksanaan tipikalnya. Carian emoji Slack (menggunakan ":") dan penyisipan tindakan tanggapan ("/") menggunakan mekanisme yang sama: watak khas membuka panel cadangan, yang membolehkan pemilihan dan aplikasi.

Pendekatan tanggapan menyoroti kebolehsuaian corak melalui templat item tersuai dan gaya. Ini mewujudkan pengalaman yang biasa dan cair di pelbagai aplikasi.

Lihat Demo ### Beyond Jenis Penyelesaian

Walaupun menyebutkan peningkatan menaip, kotak komposisi boleh berfungsi sebagai antara muka perbualan. Pintasan "/" Pintasan mencetuskan penyisipan tindakan, mewujudkan blok baru jenis tertentu.

Corak "perintah slash" ini, yang dipopularkan dalam permainan, kini standard dalam aplikasi seperti Slack dan Discord. Ia memusatkan tugas biasa, mengurangkan geseran dan beban kognitif. Sebagai contoh, perintah "/zoom" memudahkan memulakan dan berkongsi mesyuarat zum.

Sebelum ini terhad kepada pengguna kuasa, arahan slash menjadi lebih lazim dan mesra pengguna. Menambah pengalaman menaip bukan tentang menambah ciri -ciri kompleks, tetapi mengenai memberikan maklumat yang tepat pada masa yang tepat, mengurangkan beban kognitif dan meningkatkan pengalaman pengguna.

Lihat Demo

Atas ialah kandungan terperinci Jadi, anda mahu membina ciri @mention AutoComplete?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!