Selamat datang kembali di website tips dan trik Dumet School, kembali lagi dengan saya yang pastinya akan selalu memberikan tips – tips seputar dunia website. Pada artikel sebelumnya kita sudah belajar date picker range dengan jQuery UI, dan pada kesempatan kali ini saya juga akan memberikan tips dan trik tentang jQuery UI yaitu Membuat Autocomplete Output Categories Dengan jQuery UI dimana pada artikel yang lalu saya juga sudah membahas Autocomplete namun hasil pencarian masih universal. Untuk latihan kali ini kita akan membuat Autocomplete dengan output berdasarkan kategori, untuk demonya bisa lihat pada gambar di bawah ini
Bisa teman – teman lihat pada gambar di atas ini out yang akan muncul lengkap sesuai dengan kategori nya, langsung saja kita implementasikan Membuat Autocomplete Output Categories Dengan jQuery UI teman – teman siapkan text editornya lalu ketikkan script html nya seperti gambar di bawah ini
Pastekan pada text editornya dan save dengan nama index.html, selanjutnya kita load terlebih dahulu library jQuery dan jQuery UI nya
Dan masukkan script jQuery nya
<p><script></p><p> $( function() {</p><p> $.widget( "custom.catcomplete", $.ui.autocomplete, {</p><p> _create: function() {</p><p> this._super();</p><p> this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );</p><p> },</p><p> _renderMenu: function( ul, items ) {</p><p> var that = this,</p><p> currentCategory = "";</p><p> $.each( items, function( index, item ) {</p><p> var li;</p><p> if ( item.category != currentCategory ) {</p><p> ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );</p><p> currentCategory = item.category;</p><p> }</p><p> li = that._renderItemData( ul, item );</p><p> if ( item.category ) {</p><p> li.attr( "aria-label", item.category + " : " + item.label );</p><p> }</p><p> });</p><p> }</p><p> });</p><p> </p><p> $( "#search" ).catcomplete({</p><p> delay: 0,</p><p> source: data</p><p> });</p><p> } );</p><p> </script></p><span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"></span>
Kemudian tambahkan untuk kategori nya
<p>var data = [</p><p> { label: "Tips dan Trik Dumet School", category: "" },</p><p> { label: "Digital Marketing", category: "" },</p><p> { label: "Grafik Design", category: "" },</p><p> { label: "HTML dan CSS", category: "Web Master" },</p><p> { label: "Bootstrap", category: "Web Master" },</p><p> { label: "Photosop", category: "Web Master" },</p><p> { label: "PHP dan MySQL", category: "Web Master" },</p><p> { label: "jQuery Plugin", category: "Web Master" },</p><p> { label: "OOP", category: "Web Programming" },</p><p> { label: "Framework Codeigniter", category: "Web Programming" }</p><p> ];</p><span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"></span>
Jika sudah save dan jalankan pada browsernya, maka Autocomplete Categories berhasil dibuat
Bagimana, sangat mudah bukan..??
Dari hasil latihan kali ini, bisa teman – teman eksplor lagi ya dan di kembangkan. Mungkin bisa di modifikasi dengan menggabungkan dengan database seperti pada artikel sebelumnya Autocomplete dengan MySQL. Sekian pada artikel kali ini tentang Membuat Autocomplete Output Categories Dengan jQuery UI semoga bermanfaat dan menjadi bahan ajaran buat teman – teman yang saat ini sedang belajar jQuery UI nya. Terimakasih dan sampai jumpa ?