[trick] membuat autocomplete pakai gambar dengan php mysql

Bismillah..

ok langsung saja  siapkan database >>

dta

langsung saja masuk ke kodingnya >>

1. biodata.php


<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type='text/javascript' src='jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />

<script type="text/javascript">
$().ready(function() {
$("#biodata").autocomplete("proses_biodata.php", {
width: 150
});

$("#biodata").result(function(event, data, formatted) {
$('#pilihan').html("<p>" + formatted + "</p><br>");
});

});
</script>
</head>
<body>
<div style="width: 250px;">
<div><p>Nama : <input type="text" id="biodata"></p></div>
</div>

<div id="pilihan"></div>
</body>
</html>

2. proses_biodata.php


<?php
mysql_connect("localhost","root","");
mysql_select_db("latihan");

$q = $_GET["q"];
if (!$q) return;

$sql = mysql_query("select * from data where nama LIKE '%$q%'");
while($r = mysql_fetch_array($sql)) {
$foto = $r['foto'];
echo "<img src='$foto' height=50 /> <br> $r[nama] <hr>";
}
?>

dan hasilnya seperti ini >>

auto

untuk download source code >> http://www.4shared.com/zip/rXQrpMj0/biodata.html

Leave a comment

1 Comment

  1. fikry

     /  08/03/2013

    kalo autocompletenya pengen muncul setelah “@” gmn tuh ? kaya di twitter

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: