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.
Klik link berikut untuk informasi cara menyisipkan kode program supaya tampil rapi dan terformat dengan baik di diskusiweb.com: http://www.diskusiweb.com/discussion/50415/cara-menyisipkan-kode-program-di-diskusiweb-com

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/

Comments

  • 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.