Tolong pilih kategori sesuai, jenis posting (pertanyaan atau bukan) dan sertakan tag/topik yang sesuai misal komputer, php, mysql, dll.
Promosi atau posting tidak pada tempatnya akan kami hapus.
Mencantumkan kode program di posting Anda, tolong ikuti aturan yang sesuai, baca http://diskusiweb.com/discussion/39204/aturan-cara-menyisipkan-kode-program-di-diskusiweb

Baca cara posting gambar/image di post Anda: http://www.diskusiweb.com/discussion/47345/cara-menyisipkan-menyertakan-image-pada-posting/p1

[tutorial] php, jquery ui autocomplete

Langsung aja bro..
Langkah-langkah nya :
1. Buat Folder baru bernama ac
2. lalu buat folder js di dalam folder ac tersebut
3. download jquery [URL="http://code.jquery.com/jquery-1.7.1.min.js"]disini[/URL]
4. lalu copy kan ke folde js yg kita buat tadi
6. download Jquery UI [URL="http://jqueryui.com/download"]disini[/URL]
7. Extract lalu Copy folder css ke folder ac dan copy file jquery-ui-1.8.16.custom.min.js ke folder js

Setelah itu buat database dengan nama jq lalu Import SQL ini
<pre lang="sql">CREATE TABLE IF NOT EXISTS `buku` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nama` varchar(30) NOT NULL,
`pengarang` varchar(50) NOT NULL,
`tahun_terbit` varchar(4) NOT NULL,
`penerbit` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

--
-- Dumping data for table `buku`
--

INSERT INTO `buku` (`id`, `nama`, `pengarang`, `tahun_terbit`, `penerbit`) VALUES
(1, 'Saya suka kamu tidak', 'Fujiko F Fujio', '2010', 'Erlangga'),
(2, 'Tidak ada yg bisa', 'Benny Kuncoro', '2011', 'Lokomotif'),
(3, 'Tidak mungkin', 'Angga', '2009', 'Erlangga'),
(4, 'Ini dia', 'Pillar', '2011', 'Gramedia');
</pre>
Lalu buat file index.php dan Isikan dengan Kode Berikut
<pre lang="html">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQUERY UI AUTOCOMPLETE</title>
<!-- Mengincludekan JQueryUI CSS. Rename nama sunny dan sesuaikan Folder yg ada di dalam Folder CSS -->
<link rel="stylesheet" type="text/css" media="screen" href="./css/sunny/jquery-ui-1.8.16.custom.css" />

<!-- Sedikit CSS Untuk Button -->
<style>
.tombol{
font-size: 8pt;
}
</style>

<!-- Mengincludekan Library Jquery -->
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<!-- Mengincludekan Library Jquery UI-->
<script src="js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>

<script type="text/javascript">
//Function Numeric Only untuk Text box
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;

return true;
}
$(document).ready(function(){

/* Proses submit data */
$("#submit").live('click', function(){
if ($('#nama').val() == '') {
alert('Nama buku harus di isi');
$('#nama').focus();
return false;
}
if ($('#id').val() == '') {
alert('Nama buku yg anda inputkan tidak valid!');
$('#nama').focus();
return false;
}
if ($('#qty').val() == '') {
alert('Quantity harus di isi');
$('#qty').focus();
return false;
}
if ($('#harga').val() == '') {
alert('Harga harus di isi');
$('#harga').focus();
return false;
}
var jwb = confirm('Anda Yakin ingin menyimpan data ini ?');
if (jwb==1) {
$("#form1").submit(function(){
$.ajax({
url:$(this).attr("action"),
type:$(this).attr("method"),
data:$(this).serialize(),
success:function(data){
$("#result").html(data);
}
});
return false;
});
}
else
{
return false;
}
});
/* End Proses submit data */

//Mempercantik Button dengan Jquery UI
$("#submit").button();
$("#reset").button();
/* End */

var config = {
source: "json.php",
select: function(event, ui){
$("#nama").val(ui.item.nama); // Mengisi Text Box dengan id=nama dengan value nama data json
$("#id").val(ui.item.id); // Mengisi Text Box dengan id=id dengan value id data json
$("#penerbit").val(ui.item.penerbit); // Mengisi Text Box dengan id=penerbit dengan value penerbit data json
},
minLength: 1
};
$("#nama").autocomplete(config);
});
</script>
</head>
<body style="font-size: 9pt; font-family: tahoma, verdana;">
<form action="post.php"  method="post" id="form1">
<table border=0 cellpadding=0>
<tr>
<td><label for="nama">Nama Buku</label></td>
<td>
<!-- Hidden disini untuk keperluan penyimpanan ke database bila anda ingin melakukan penyimpanan ke Database maka ID ini yg disimpan, Bukan Nama nya -->
<input type="hidden" name="id" id="id">
<input type="text" id="nama"  name="nama" value="">
</td>
</tr>
<tr>
<td><label for="penerbit">Penerbit</label></td>
<td><input type="text" id="penerbit" readonly="readonly"  name="penerbit"></td>
</tr>
<tr>
<td><label for="qty">Quantity</label></td>
<td><input type="text" name="qty" size="5" onKeyPress="return isNumberKey(event)" style="text-align: right;" id="qty"></td>
</tr>
<tr>
<td><label for="harga">Harga</label></td>
<td>
<input type="text" name="harga" size="12" onKeyPress="return isNumberKey(event)" style="text-align: right;" id="harga">
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit" id="submit" value="Submit"><input type="reset" name="reset" id="reset" value="Reset">
</td>
</tr>
</table>
</form>
<br />
<div id="result"></div>

</body>
</html>
</pre>

Setelah itu buar file json.php lalu isikan dengan kode berikut
<pre lang="php">
<?php
$db = mysql_connect("localhost","root","");
$con = mysql_select_db("jq",$db);
if(!$con){
echo "Something Problem";
}

$return_arr = array();

$data = mysql_query("SELECT * FROM buku WHERE nama LIKE '%" . mysql_real_escape_string($_GET['term']) . "%'");

$responce->page = $page;
$responce->total = $total_pages;
$responce->records = $count;
$i=0;
while($line = mysql_fetch_array($data, MYSQL_ASSOC)){
$row_array["value"] = $line["nama"];
$row_array["id"] = $line["id"];
$row_array["penerbit"] = $line["penerbit"];

array_push($return_arr, $row_array);
}
echo json_encode($return_arr);

?>
</pre>

Setelah itu buat file post.php untuk response submit nya
<pre lang="php">
<?php
echo "<fieldset class=\"ui-widget ui-widget-content ui-corner-all\" style=\"width: 200px\">";
echo "<legend class=\"ui-widget ui-widget-header ui-corner-all\" style=\"padding: 1px 5px 1px 5px\">RESULT</legend>";
echo "ID Buku : ".$_POST["id"]."<br />";
echo "Nama Buku : ".$_POST["nama"]."<br />";
echo "penerbit : ".$_POST["penerbit"]."<br />";
echo "Qty Barang : ".$_POST["qty"]."<br />";
echo "Harga Barang : ".$_POST["harga"]."<br />";
echo "</fieldset>";

?>
</pre>
Selesai sudah tutorial kali ini, sebelumnya saya ucapkan maaf bila masih banyak kekurangan nya..
Untuk Lihat Demo-nya klik http://maestrosolution.com/demo/ac/
Untuk Download File lengkapnya klik http://www.ziddu.com/download/18103395/ac.rar.html

Source From : http://jt3angga.wordpress.com/2012/01/06/php-jquery-merancang-user-interface-form-pencarian-data-menggunakan-jquery-ui-autocomplete/

Tanggapan

  • edited January 2012
    nice tutorial bro, biar codenya lebih enak dibaca.

    Langsung aja bro..
    Langkah-langkah nya :
    1. Buat Folder baru bernama ac
    2. lalu buat folder js di dalam folder ac tersebut
    3. download jquery http://code.jquery.com/jquery-1.7.1.min.js
    4. lalu copy kan ke folde js yg kita buat tadi
    5. download Jquery UI http://jqueryui.com/download
    6. Extract lalu Copy folder css ke folder ac dan copy file jquery-ui-1.8.16.custom.min.js ke folder js
    Setelah itu buat database dengan nama jq lalu Import SQL ini

    CREATE TABLE IF NOT EXISTS `buku` (
    `id` INT(11) NOT NULL AUTO_INCREMENT,
    `nama` VARCHAR(30) NOT NULL,
    `pengarang` VARCHAR(50) NOT NULL,
    `tahun_terbit` VARCHAR(4) NOT NULL,
    `penerbit` VARCHAR(50) NOT NULL,
    PRIMARY KEY (`id`)
    ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;
     
    --
    -- Dumping data for table `buku`
    --
     
    INSERT INTO `buku` (`id`, `nama`, `pengarang`, `tahun_terbit`, `penerbit`) VALUES
    (1, 'Saya suka kamu tidak', 'Fujiko F Fujio', '2010', 'Erlangga'),
    (2, 'Tidak ada yg bisa', 'Benny Kuncoro', '2011', 'Lokomotif'),
    (3, 'Tidak mungkin', 'Angga', '2009', 'Erlangga'),
    (4, 'Ini dia', 'Pillar', '2011', 'Gramedia');


    Lalu buat file index.php dan Isikan dengan Kode Berikut
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">;
    <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>JQUERY UI AUTOCOMPLETE</title>
    <!-- Mengincludekan JQueryUI CSS. Rename nama sunny dan sesuaikan Folder yg ada di dalam Folder CSS -->
    <link rel="stylesheet" type="text/css" media="screen" href="./css/sunny/jquery-ui-1.8.16.custom.css">
     
    <!-- Sedikit CSS Untuk Button -->
    <style>
    .tombol{
    font-size: 8pt;
    }
    </style>
     
    <!-- Mengincludekan Library Jquery -->
    &lt;script src="js/jquery-1.5.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
    <!-- Mengincludekan Library Jquery UI-->
    &lt;script src="js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"&gt;&lt;/script&gt;
     
    &lt;script type="text/javascript"&gt;
    //Function Numeric Only untuk Text box
    function isNumberKey(evt)
    {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode &gt; 31 &amp;&amp; (charCode &lt; 48 || charCode &gt; 57))
    return false;
     
    return true;
    }
    $(document).ready(function(){
     
    /* Proses submit data */
    $("#submit").live('click', function(){
    if ($('#nama').val() == '') {
    alert('Nama buku harus di isi');
    $('#nama').focus();
    return false;
    }
    if ($('#id').val() == '') {
    alert('Nama buku yg anda inputkan tidak valid!');
    $('#nama').focus();
    return false;
    }
    if ($('#qty').val() == '') {
    alert('Quantity harus di isi');
    $('#qty').focus();
    return false;
    }
    if ($('#harga').val() == '') {
    alert('Harga harus di isi');
    $('#harga').focus();
    return false;
    }
    var jwb = confirm('Anda Yakin ingin menyimpan data ini ?');
    if (jwb==1) {
    $("#form1").submit(function(){
    $.ajax({
    url :$(this).attr("action"),
    type :$(this).attr("method"),
    data :$(this).serialize(),
    success:function(data){
    $("#result").html(data);
    }
    });
    return false;
    });
    }
    else
    {
    return false;
    }
    });
    /* End Proses submit data */
     
    //Mempercantik Button dengan Jquery UI
    $("#submit").button();
    $("#reset").button();
    /* End */
     
    var config = {
    source: "json.php",
    select: function(event, ui){
    $("#nama").val(ui.item.nama); // Mengisi Text Box dengan id=nama dengan value nama data json
    $("#id").val(ui.item.id); // Mengisi Text Box dengan id=id dengan value id data json
    $("#penerbit").val(ui.item.penerbit); // Mengisi Text Box dengan id=penerbit dengan value penerbit data json
    },
    minLength: 1
    };
    $("#nama").autocomplete(config);
    });
    &lt;/script&gt;
     
     
    <form action="post.php" method="post" id="form1">
    <table border="0" cellpadding="0">
    <tbody><tr>
    <td><label for="nama">Nama Buku</label></td>
    <td>
    <!-- Hidden disini untuk keperluan penyimpanan ke database bila anda ingin melakukan penyimpanan ke Database maka ID ini yg disimpan, Bukan Nama nya -->
    <input type="hidden" name="id" id="id">
    <input type="text" id="nama" name="nama" value="">
    </td>
    </tr>
    <tr>
    <td><label for="penerbit">Penerbit</label></td>
    <td><input type="text" id="penerbit" readonly="readonly" name="penerbit"></td>
    </tr>
    <tr>
    <td><label for="qty">Quantity</label></td>
    <td><input type="text" name="qty" size="5" onkeypress="return isNumberKey(event)" style="text-align: right;" id="qty"></td>
    </tr>
    <tr>
    <td><label for="harga">Harga</label></td>
    <td>
    <input type="text" name="harga" size="12" onkeypress="return isNumberKey(event)" style="text-align: right;" id="harga">
    </td>
    </tr>
    <tr>
    <td>
    <input type="submit" name="submit" id="submit" value="Submit"><input type="reset" name="reset" id="reset" value="Reset">
    </td>
    </tr>
    </tbody></table>
    </form>
    <br>
    <div id="result"></div>
    </body>
    </html>


    Setelah itu buar file json.php lalu isikan dengan kode berikut
    <!--?php
    $db = mysql_connect("localhost","root","");
    $con = mysql_select_db("jq",$db);
    if(!$con){
    echo "Something Problem";
    }
     
    $return_arr = array();
     
    $data = mysql_query("SELECT * FROM buku WHERE nama LIKE '%" . mysql_real_escape_string($_GET['term']) . "%'");
     
    $responce----->page = $page;
    $responce-&gt;total = $total_pages;
    $responce-&gt;records = $count;
    $i=0;
    while($line = mysql_fetch_array($data, MYSQL_ASSOC)){
    $row_array["value"] = $line["nama"];
    $row_array["id"] = $line["id"];
    $row_array["penerbit"] = $line["penerbit"];
     
    array_push($return_arr, $row_array);
    }
    echo json_encode($return_arr);
     
    ?&gt;


    Setelah itu buat file post.php untuk response submit nya
    <!--?php
    echo "<fieldset class=\"ui-widget ui-widget-content ui-corner-all\" style=\"width: 200px\"---->";
    echo "<legend class="\" ;ui-widget"="" ui-widget-header="" ui-corner-all\"="" style="\" padding:"="" 1px="" 5px="" 5px\"="">RESULT</legend>";
    echo "ID Buku : ".$_POST["id"]."<br>";
    echo "Nama Buku : ".$_POST["nama"]."<br>";
    echo "penerbit : ".$_POST["penerbit"]."<br>";
    echo "Qty Barang : ".$_POST["qty"]."<br>";
    echo "Harga Barang : ".$_POST["harga"]."<br>";
    echo "";
     
    ?&gt;

    Selesai sudah tutorial kali ini, sebelumnya saya ucapkan maaf bila masih banyak kekurangan nya..
    Untuk Lihat Demo-nya klik http://maestrosolution.com/demo/ac/
    Untuk Download File lengkapnya klik http://www.ziddu.com/download/18103395/ac.rar.html

    Source From : http://jt3angga.wordpress.com/2012/01/06/php-jquery-merancang-user-interface-form-pencarian-data-menggunakan-jquery-ui-autocomplete/
  • waw, nice share gan
  • mas tanya,, itu datanya ga bs d save y,, yang di find record kalo udah ketemu pgn d save di database gmn scriptnya mas,,, mohon bimbingannya :( 
  • Maaf Gan, disaya kok gak jalan ya, pas panggil json.php nya?
    Thx.
  • Sebelumnya makasih gan tutorialnya, tp koq gak bs jalan yaa di PC ane, web server ane XAMPP 1.8.1 . Thx
Sign In or Register to comment.