Membuat Autocomplete Output Categories Dengan jQuery UI

Selamat datang kembali di laman tips dan trik Source Code Aplikasi, kembali lagi dengan saya yang pastinya akan selalu memberikan tips – tips seputar dunia laman. Di artikel sebelumnya kita telah belajar date picker range dengan jQuery UI, dan di kesempatan kali ini saya pun akan memberikan tips dan trik mengenai jQuery UI yaitu Membangun Autocomplete Output Categories Dengan jQuery UI dimana di artikel yang lalu saya pun telah membahas Autocomplete namun hasil pencarian masih universal. Bagi latihan kali ini kita akan merancang Autocomplete dengan output menurut kategori, bagi demonya dapat lihat di gambar di bawah ini



Selamat



Dapat teman – teman lihat di gambar di atas ini out yang akan muncul komplit sesuai dengan kategori nya, seketika saja kita implementasikan Membangun Autocomplete Output Categories Dengan jQuery UI teman – teman siapkan text editornya lalu ketikkan script html nya seperti gambar di bawah ini



Selamat



Pastekan di text editornya dan save dengan nama index.html, berikutnya kita load terlebih dahulu library jQuery dan jQuery UI nya



Selamat



Dan masukkan script jQuery nya



<p><script></p><p>  $( function() {</p><p>    $.widget( kustom.catcomplete, $.ui.autocomplete, {</p><p>      _create: function() {</p><p>        this._super();</p><p>        this.widget().fitur( 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 bagi kategori nya



<p>var data = [</p><p>      { label: Tips dan Trik Source Code Aplikasi, 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>


Selamat



Sekiranya telah save dan jalankan di browsernya, karenanya Autocomplete Categories berhasil dibangun



Selamat



Bagimana, amat gampang bukan..??



Dari hasil latihan kali ini, dapat teman – teman eksplor lagi ya dan di kembangkan. Mungkin dapat di modifikasi dengan menggabungkan dengan database seperti di artikel sebelumnya Autocomplete dengan MySQL. Demikian di artikel kali ini mengenai Membangun Autocomplete Output Categories Dengan jQuery UI semoga bermanfaat dan menjadi bahan ajaran bikin teman – teman yang dikala ini sedang belajar jQuery UI nya. Terimakasih dan hingga jumpa ?




Sumber https://kursuswebsite.org

Popular posts from this blog

Perbedaan Antara Keyup dan Keydown Pada jQuery

Even di javascript adalah sebuah suatu yang terjadi di element tertentu, maksudnya yaitu suatu respon atau aksi yang di lakukan oleh user dimana kegiatan tersebut akan memicu jalannya script javascript yang terdapat di blog tersebut. Di javascript terdapat banyak event namun di pembahasan kali ini kita akan membahas mengenai Perbedaan Antara Keyup dan Keydown Di jQuery, Keyup adalah sebuah event yang akan di jalankan ketika tombol dilepaskan di di keyboard, dan sedangkan Keydown adalah sebuah event ketika tombol ditekan di keyboard.
Read more

Membuat Table Warna Berselang dengan PHP

Image
Selamat datang di blog Source Code Aplikasi, masih dengan File yang kemarin, tapi sekarang ini kita akan menggunakan Framework Bootstrap dan Membangun Table Warna Berselang dengan PHP, jadi jangan lupa yang kemarin praktekin dulu yah teman teman link nya yang ini . oka seketika saja kita praktekan.
Read more