Diberdayakan oleh Blogger
Gambar tema oleh Igniel
Beranda  ›  jQuery  ›  PHP

Search autocomplete dengan jquery php mysqli

Posting Komentar
Di tutorial kali ini lacodeid akan membuat fitur search Autocomplete dengan Jquery PHP Mysgli sebelum masuk ke bagian koding ada beberapa hal yang harus disiapkan adalah Jquerynya untuk mendownload  disini JQUERY bila anda sudah mendownload jquerynya silakan ikuti langkah-langkah dibawah ini :

buat tabel database seperti ini :

CREATE TABLE IF NOT EXISTS `tbl_auto` (
`id` int(11) NOT NULL,
  `nama_anime` varchar(225) NOT NULL,
  `description` text NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=102 DEFAULT CHARSET=latin1;
ALTER TABLE `tbl_auto`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `tbl_auto`
--
ALTER TABLE `tbl_auto`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=102;
diatas adalah tabel penampung datanya, silakan buat file index.php didalam folder ex.latihanautocomplete di localhost anda lalu copas koding dibawah ini kedalam file index.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Autocomplete jQuery PHP</title>

<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">

<!-- link css -->
<link rel="stylesheet" href="styler.css" />
<link rel="stylesheet" href="js/jquery-ui.css" />

<!-- link javascrip -->
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery-ui.js"></script>

<!-- css -->
<style type="text/css">
    body {
        font-size: 14px;
        font-weight: normal;
        background-color: #f5f5f5;
    }

    body { 
        padding-bottom: 70px; 
    }

    .h1, .h2, .h3, h1, h2, h3 {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    h2 {
        text-align: center;
    }
    .lacodeid-uppercase {
        text-transform: uppercase;
    }

    .lacodeid-jarak {
        margin-top: 90px;
    }

    .panel-heading {
        padding: 0;
    }

    .style-text {
        padding: 0.5em;
        font-size: 1em;
        margin-bottom: 1.5em;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        border: 1px solid #fb3e08;
        border-radius: 1px;
        height: 50px;
    }

    .btn-lacodeid {
        width: 120px;
        border-radius: 1px;
        padding: 10px;
        font-size: 14px;
        background-color: #fb3e08;
        color: #fff !important;
        font-weight: bold;
        text-transform: uppercase;
        overflow: visible;
    }

    .btn-lacodeid:hover,
    .btn-lacodeid:focus{
        background-color: #f99f04;
        color: #fff !important;
    }

    .lacode-posisi-text {
        text-align: center;
    }

    .lacodeid-posisi-icon {
        margin: -45px 0 0 0;
    }

    .fa-size {
        font-size: 3em;
    }

    .lacode-fa {
        background-color: #fb3e08;
        padding: 5px;
        border-radius: 50px;
        width: 53px;
        text-align: center;
        color: #fff;
    }

    .lacodeid-or {
        background-color: #fb3e08;
        padding: 17px 0;
        border-radius: 50px;
        width: 70px;
        height: 66px;
        text-align: center;
        color: #fff;
        margin: 51px 0 7px 50px;
    }

    .btn-medsos-lacodeid {
        padding: 12px 0;
        border-radius: 50px;
        width: 56px;
        height: 56px;
        text-align: center;
        color: #fff;
        margin: 51px 0 7px 57px;
    }

    .lacodeid-fb {
        background-color: #286090;
    }

    .lacodeid-gl {
        background-color: #d0240b;
    }

    .lacodeid-tw {
        background-color: #0bd0ce;
    }

    ul{
        margin-left:-40px;
    }

    ul li{
        list-style-type: none;
        border-bottom: dotted 1px black;
    }
</style>

<!-- javascript -->
<script>
    $(document).ready(function(){
        /*autocomplete muncul setelah user mengetikan minimal2 karakter */
        $(function() {  
            $( "#search" ).autocomplete({
                source: "data.php",  
                minLength:2, 
            });
        });
    });

    $(document).ready(function(){
         
         function search(){

              var title=$("#search").val();

            if(title!=""){
                $("#result").html("loading...");
                $.ajax({
                    type:"post",
                    url:"search.php",
                    data:"title="+title,
                    success:function(data){
                        $("#result").html(data);
                        $("#search").val("");
                    }
                });
            }
        }

        $("#button").click(function(){
            search();
        });

        $('#search').keyup(function(e) {
            if(e.keyCode == 13) {
                search();
            }
        });
    });
</script>

</head>
<body>
<!-- menu nav -->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">LACODEID</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
     
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<div class="container lacodeid-jarak">
    <div class="row">
        <div class="col-lg-12">

            <div class="panel">
                <div class="panel-heading">
                    <div class="lacode-posisi-text lacodeid-posisi-icon">
                        <i class="fa fa-size fa-search lacode-fa"></i>
                    </div>
                    <h2>LACODEID</h2>
                </div>

                <div class="panel-body">
                    <div class="wrap">
                        <h1>Autocomplete dari database dengan jQuery dan PHP</h1>
                     <div class="input-group">
                            <input type="text" class="form-control" id="search" style="border-radius: 1px;" placeholder="Keyword" />
                            <span class="input-group-btn">
                         <button class="btn btn-default" id="button" type="button">Go!</button>
                            </span>
                     </div>

                        <ul id="result"></ul>
                    </div>  
                </div>
            </div>

        </div>
    </div><!-- /.row -->
</div>

</body>
</html>
kode ini nantinya akan berfungsi untuk menampilkan data ketika keyword anda ketikan
$(document).ready(function(){
   /*autocomplete muncul setelah mengetikan minimal2 karakter */
   $(function() {  
        $( "#search" ).autocomplete({
             source: "data.php",  
             minLength:2, 
       });
  });
});
$(document).ready(function(){
         //bagian serach ini akan berjalan ketika tombol go diklik
         function search(){
              var title=$("#search").val();
            if(title!=""){
                $("#result").html("loading...");
                $.ajax({
                    type:"post",
                    url:"search.php",
                    data:"title="+title,
                    success:function(data){
                        $("#result").html(data);
                        $("#search").val("");
                    }
                });
            }
        }

        $("#button").click(function(){
            search();
        });

        $('#search').keyup(function(e) {
            if(e.keyCode == 13) {
                search();
            }
        });
    });
fitur javascript ini yang akan digunakan untuk autocompletenya
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery-ui.js"></script>
sedangkan ini untuk cssnya
<link rel="stylesheet" href="styler.css" />
<link rel="stylesheet" href="js/jquery-ui.css" />
lalu buat file data.php letakan satu folder dengan index.php untuk kodingnya silakan anda copas koding dibawah ini :
<?php
date_default_timezone_set("Asia/jakarta");
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$dbname = "dbautocomplete";

$koneksi = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname)or die("error koneksi");
if(mysqli_connect_errno()){
 echo 'Gagal melakukan koneksi ke Database : '.mysqli_connect_error();
}

$row_set = array();

//harus selalu gunakan variabel term saat memakai autocomplete,
//jika variable term tidak bisa, gunakan variabel q

$term = trim(strip_tags($_GET['term']));

$qstring = "SELECT * FROM tbl_auto WHERE nama_anime LIKE '".$term."%'";

//query database untuk mengecek tabel anime 
$result = mysqli_query($koneksi,$qstring);
$found=mysqli_num_rows($result);

if($found>0) {
 while ($row = mysqli_fetch_assoc($result)) {

     $row['value']=htmlentities(stripslashes($row['nama_anime']));
     $row['id']=(int)$row['id'];
  //buat array yang nantinya akan di konversi ke json
     $row_set[] = $row;

 }
}else{

 $row_set[]='Not found...';

}

//data hasil query yang dikirim kembali dalam format json
echo json_encode($row_set);
koding diatas yang akan digunakan untuk menampilkan data ketika keyword anda ketikan
selanjutnya anda buat file search.php letakan satu folder dengan index.php untuk kodingnya silakan anda copas koding dibawah ini :
<?php
date_default_timezone_set("Asia/jakarta");
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$dbname = "dbautocomplete";

$koneksi = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname)or die("error koneksi");
if(mysqli_connect_errno()){
 echo 'Gagal melakukan koneksi ke Database : '.mysqli_connect_error();
}
 
$title=$_POST["title"];

$result=mysqli_query($koneksi,"SELECT * FROM tbl_auto where nama_anime like '%$title%'");

$found=mysqli_num_rows($result);
 
if($found>0) {

  while($row=mysqli_fetch_assoc($result)) {

   echo "<li><a href=".$row['id'].">".$row['nama_anime']."</a></li>";
   echo "<li>".$row['description']."</li>";
    } 

}else{

  echo "<li>No Tutorial Found<li>";

}
// ajax search
koding diatas digunakan untuk menampilkan data ketika tombol go di klik,
silakan dicoba dan dipelajari untuk dikembangkan lebih jauh lagi
jQuery PHP
SHARE WhatsApp

Related Posts

Posting Komentar

Posting Komentar