Tutorial Membuat Autocomplete pencarian dengan Jquery

Tutorial Membuat Autocomplete pencarian dengan Jquery

jQuery adalah library JavaScript multiplatform yang dirancang untuk memudahkan penyusunan client-side script pada file HTML.Digunakan oleh 60 persen dari 10000 situs web paling banyak dikunjungi di dunia, jQuery adalah library JavaScript yang paling populer saat ini. jQuery merupakan sebuah perangkat lunak bebas sumber terbuka yang berada di bawah lisensi MIT. oke langsung saja kita ke topik pembahasan , kali ini kita membahas masalah Jquery Autocomplete yang di terapkan pada suatu kolom pencarian . jquery2             Lansung saja  kita mulai, langkah pertama buka editor kesayangan kita kemudian ketikan Code berikut :
<!doctype html>  <html lang="en">  <head>    <meta charset="utf-8">    <title>Membuat Pencarian Dengan Jquery Autocomplete</title>    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">    <script src="//code.jquery.com/jquery-1.10.2.js"></script>    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>    <link rel="stylesheet" href="/resources/demos/style.css">    <script>    $(function() {      var CariData = [        "Apel",        "Mangga",        "Nanas",        "Pisang",        "Anggur",        "jeruk",        "salak",        "Rambai",        "Rambutan",        "Perr"      ];  //deklarasikan id untuk di panggil di hatml nanti      $( "#cari" ).autocomplete({        source: CariData      });    });    </script>  </head>  <body>     <div class="ui-widget">    <label for="cari">Pencarian Data: </label>    <input id="tags">  </div>     </body>  </html>
di tutorial berikutnya akan kita bahas bagaimana data yang akan kita cari terintergrasi dengan database. sekian dan terimakasih .. salam jquery


EmoticonEmoticon