ASP.NET MVC jQuery Autocomplete

Autocomplete text box di aplikasi web sudah menjadi hal yang lumrah, bukan lagi menjadi sesuatu yang wah seperti beberapa tahun silam. Sejak kemunculan jQuery pada tahun 2006, dunia web khususnya dari segi front end menjadi semakin interaktif, termasuk salah satunya fitur autocomplete.

MVC Multiple Model

Tutorial saya ini akan membahas penggunaan autocomplete jQuery yang dipadukan dengan ASP.NET MVC. Materi yang dibahas ada beberapa hal yaitu :
1. Autocomplete dari data berupa string
2. Autocomplete dari database
3. Event select

Langkah pertama adalah me-load library javascript yang dibutuhkan yaitu jquery dan jquery-ui serta css untuk styling pada autocomplete. Kalau di tempat saya karena Visual Studio sudah otomatis memasukkan jquery maka saya tidak perlu menambahkannya, kalau di tempat pembaca belum ya tinggal ditambahkan saja.

File js dan css kenapa saya masukkan ke section menggunakan @section karena saya ingin file-file tersebut hanya di-load ketika halaman yang bersangkutan dibuka. Untuk memanggil section, kita menggunakan kode di bawah ini pada file layout.

Dengan demikian kalau kita butuh css tertentu atau javascript tertentu yang hanya ingin di-load ketika halaman tertentu dibuka maka masukkan ke section, jangan semuanya ditaruh di layout.

Kembali ke topik autocomplete. Tanpa teks input maka apanya yang mau dibikin autocomplete iya tidak?. Buat sebuah input teks dan jangan lupa untuk memberi id pada elemen tersebut.

Sip sekarang kita buat script java javascript untuk membuat teks input di atas menjadi autocomplete. Masukkan kode di bawah ini pada bagian yang saya komen pada kode include file jquery-ui di atas.

Yup sampai di sini untuk bagian klien/frontend sudah selesai. Tahap selanjutnya adalah membuat bagian backend yang mengurusi suplai data untuk autocomplete

1. Data string

Data string yang saya maksud adalah data yang berupa string statis, bukan berasal dari penyimpanan data.

Pada bagian frontend tadi kita sudah menyelipkan kode

source digunakan sebagai sumber data untuk autocomplete. Pada kode di atas dia mengarah ke controller Home, action Search. Sekarang tugas kita untuk membuatnya.

Pada controller Home buat action baru seperti di bawah ini

term adalah nama parameter yang dikirim oleh autocomplete untuk menyeleksi data sesuai input yang dimasukkan. Kenapa namanya term bukan yang lain?. Itu ketentuan dari jquery-ui.

Jika langkah sudah benar maka hasilnya adalah sebagai berikut.

1. autocomplete static string

2. Data dari Database

Untuk data dari database, format yang dibutuhkan oleh jquery-ui sebagai sumber datanya adalah berupa json dengan format sebagai berikut

Dengan demikian hal yang perlu dilakukan adalah melakukan query data dari database kemudian mengubahnya menjadi dalam bentuk label dan value seperti di atas.

Saya asumsikan pembaca sudah biasa dan bisa mengambil data dari database dengan nilai kembalian berupa collection (List, IEnumerable). Langkah selanjutnya adalah me-mapping data menjadi bentuk label dan value.

Misalkan kelas model yang digunakan dan yang mewakili tabel di database adalah seperti ini

Untuk melakukan mapping ada 2 cara, pertama menggunakan kelas bantuan kedua menggunakan kelas anonymous.

2.1 Menggunakan Kelas Anonymous

Jika menggunakan kelas anonymous maka menjadi seperti ini

Hasilnya sama dengan sebelumnya cuma setelah dipilih maka pada inputan teks yang muncul adalah nilai dari property value.

2. autocomplete database

3. value

2.1 Menggunakan Kelas Mapping

Idenya sama saja, cuma jika menggunakan kelas yang dibuat khusus untuk mapping maka akan menjadi jelas. Untuk menggunakan cara ini kita perlu membuat kelas, misal

Dan penggunaan ketika mapping adalah bisa dilihat di bawah ini

3. Event Select

Event select digunakan jika kita ingin melakukan kustomisasi saat autocomplete dipilih oleh pengguna. Misalnya ketika technology dipilih maka ada 2 input teks lain yang seketika itu juga masing-masing berisi nilai dari value serta isFramework.

Tambahkan 2 buah input teks lain dan jangan lupa kasih id.

Update javascript untuk autocomplete

Bisa di lihat pada kode di atas, select berisi fungsi untuk melakukan kustomisasi. Jika langkah sudah benar maka hasilnya adalah seperti di bawah.

4. Select

Screenshot di atas adalah hasil setelah pengguna memilih Ruby dari daftar autocomplete yang ditampilkan.

Facebook Comments
 

Agung Setiawan

Agung Setiawan adalah software engineer di BukaLapak.com, penulis sekaligus pecinta sastra, dan pembaca buku

 
Halo, perkenalkan saya Agung Setiawan.
Saya Software Engineer di BukaLapak.
Simak pemikian saya soal dunia Software Engineering via Twitter di @agungsetiawanmu dan facebook
Blog ini saya update seminggu sekali jadi sering-sering saja mampir
Mau belajar Vim bareng saya?
Belajar ngoding dari nol menggunakan PHP

Leave a Reply

Your email address will not be published. Required fields are marked *