ask loop js autocomplete

Boy Fernandez · Dec 6, 2012
index
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <!-- sesuaikan dengan path jqueryui yang kamu punya -->
    <link rel="stylesheet" href="jquery-ui-1.9.2.custom/themes/black-tie/jquery-ui.css" />
    <script src="jquery-ui-1.9.2.custom/js/jquery-1.8.3.js"></script>
    <script src="jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.js"></script>
    </head>
    <body>
    <form action="" method="post">
    Nama: <input type="text" name="nama[0]" id="nama"/>
    Kelas: <input type="text" name="kelas" id="kelas"/>
    </br>
    Nama: <input type="text" name="nama[1]" id="nama"/>
    Kelas: <input type="text" name="kelas" id="kelas"/>
    </br>
    Nama: <input type="text" name="nama[2]" id="nama"/>
    Kelas: <input type="text" name="kelas" id="kelas"/>
    </form>
    <script>
	
    $(function() {
		

    $( "#nama" ).autocomplete({
    source: "get_nama.php",
    minLength: 2,
    select: function( event, ui ) {
    $('#nama').val(ui.item.nama);
    $('#kelas').val(ui.item.kelas);
	}
    });
    });
	
    </script>
    </body>
    </html>
get_nama
<? include ('koneksi.php'); 
    $kode = $_GET['term'];
    $sql = "select * from foto where nama like '$kode%'";
    $hs = mysql_query($sql);
    $json = array();
	
    while($rs = mysql_fetch_array($hs)){
    $json[] = array(
    'label' => $rs['nama'],
    'value' => $rs['nama'],
    'kelas' => $rs['kelas']

    );
    }
    header("Content-Type: application/json");
    echo json_encode($json);
	?>

butuh pencerahan master
gmn biar nama di baris ke 2 n 3
bisa tampil js autocomplete jg seperti di baris 1
Silahkan login untuk menjawab!
0
Ellyx Christian · Dec 7, 2012 · 0 Suka · 0 Tidak Suka
sebagai catatan id dari setiap element html harus unik.
<html lang="en">
    <head>
    <meta charset="utf-8" />
    <!-- sesuaikan dengan path jqueryui yang kamu punya -->
    <link rel="stylesheet" href="jquery-ui-1.9.2.custom/themes/black-tie/jquery-ui.css" />
    <script src="jquery-ui-1.9.2.custom/js/jquery-1.8.3.js"></script>
    <script src="jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.js"></script>
    </head>
    <body>
    <form action="" method="post">
    Nama: <input type="text" name="nama[0]" id="nama-0" class="nama"/>
    Kelas: <input type="text" name="kelas" id="kelas-0"/>
    </br>
    Nama: <input type="text" name="nama[1]" id="nama-1" class="nama"/>
    Kelas: <input type="text" name="kelas" id="kelas-1"/>
    </br>
    Nama: <input type="text" name="nama[2]" id="nama-2" class="nama"/>
    Kelas: <input type="text" name="kelas" id="kelas-2"/>
    </form>
    <script>
 
    $(function() {
 
 
    $( ".nama" ).autocomplete({
    source: "get_nama.php",
    minLength: 2,
    select: function( event, ui ) {
    $(event.target).val(ui.item.nama);
    $(event.target).next().val(ui.item.kelas);
	}
    });
    });
 
    </script>
    </body>
    </html>
0
Boy Fernandez · Dec 7, 2012 · 0 Suka · 0 Tidak Suka
kk ini kelas nya jd gak bisa GET value nya
bisa tolong jelasin beda js yg pertama dan kedua
 <script>
 $(function() {
 $( ".nama" ).autocomplete({
source: "get_nama.php",
minLength: 2,
select: function( event, ui ) {
$(event.target).val(ui.item.nama);
$(event.target).next().val(ui.item.kelas);
}
});
});
 </script>

 <script>
 
$(function() {
$( "#nama" ).autocomplete({
source: "get_nama.php",
minLength: 2,
select: function( event, ui ) {
$('#nama').val(ui.item.nama);
$('#kelas').val(ui.item.kelas);
}
});
});
</script>
0
Ellyx Christian · Dec 7, 2012 · 0 Suka · 0 Tidak Suka
bedanya ya cuma, pada selectorny, yang satu pake selector id dan yang satu lagi selector class.
saya rasa masalanhnya bukan pada javascriptnya tapi pada penamaan element form kamu
semuanya kamu kasi nama yang sama kelas

Kelas: <input type="text" name="kelas" id="kelas-0"/>

seharusnya sama seperti untuk input nama:

Nama: <input type="text" name="nama[1]" id="nama-1" class="nama"/>
Kelas: <input type="text" name="kelas[1]" id="kelas-1"/>

<html lang="en">
    <head>
    <meta charset="utf-8" />
    <!-- sesuaikan dengan path jqueryui yang kamu punya -->
    <link rel="stylesheet" href="jquery-ui-1.9.2.custom/themes/black-tie/jquery-ui.css" />
    <script src="jquery-ui-1.9.2.custom/js/jquery-1.8.3.js"></script>
    <script src="jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.js"></script>
    </head>
    <body>
    <form action="" method="post">
    Nama: <input type="text" name="nama[0]" id="nama-0" class="nama"/>
    Kelas: <input type="text" name="kelas[0]" id="kelas-0"/>
    </br>
    Nama: <input type="text" name="nama[1]" id="nama-1" class="nama"/>
    Kelas: <input type="text" name="kelas[1]" id="kelas-1"/>
    </br>
    Nama: <input type="text" name="nama[2]" id="nama-2" class="nama"/>
    Kelas: <input type="text" name="kelas[2]" id="kelas-2"/>
    </form>
    <script>
 
    $(function() {
 
 
    $( ".nama" ).autocomplete({
    source: "get_nama.php",
    minLength: 2,
    select: function( event, ui ) {
    $(event.target).val(ui.item.nama);
    $(event.target).next().val(ui.item.kelas);
	}
    });
    });
 
    </script>
    </body>
    </html>
0
Boy Fernandez · Dec 7, 2012 · 0 Suka · 0 Tidak Suka
bukan pengaruh penamaan nya d bro..
pengaruh di class nya..
ini ak utak atik bs muncul nama nya klu class nya ada
sedangkan klu gak ada class nya gak muncul get nama nya
tp semua gak bs munculin isi db kelas :(
hmmmmmmmmm
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <!-- sesuaikan dengan path jqueryui yang kamu punya -->
    <link rel="stylesheet" href="js/themes/base/jquery.ui.all.css" />
    <script src="js/jquery-1.8.3.js"></script>
    <script src="js/jquery-ui-1.9.2.custom.js"></script>
    </head>
    <body>
    <form action="" method="post">
Nama: <input type="text" name="nama" id="nama" class="nama"/>
Kelas: <input type="text" name="kelas" id="kelas" />
</br>
Nama: <input type="text" name="nama" id="nama" class="nama"/>
Kelas: <input type="text" name="kelas" id="kelas"/>
</br>
Nama: <input type="text" name="nama" id="nama" />
Kelas: <input type="text" name="kelas" id="kelas"/>
</form>
<script>
$(function() {
$( ".nama" ).autocomplete({
source: "get_nama.php",
minLength: 2,
select: function( event, ui ) {
$(event.target).val(ui.item.nama);
$(event.target).next().val(ui.item.kelas);
}
});
});
</script>
</body>
</html>
0
Ellyx Christian · Dec 10, 2012 · 0 Suka · 0 Tidak Suka
sory saya tidak lihat versi jqueryui yang kamu pake, jadi dijqueryui 1.9.2 saat menggunakan autocomplete akan ditambahkan element span seperti <span class="ui-helper-hidden-accessible" role="status" aria-live="polite">1 result is available, use up and down arrow keys to navigate.</span> setelah input boxnya jadi ubah code menjadi seperti:
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <!-- sesuaikan dengan path jqueryui yang kamu punya -->
        <link rel="stylesheet" href="jquery-ui-1.9.2.custom/themes/black-tie/jquery-ui.css" />
        <script src="jquery-ui-1.9.2.custom/js/jquery-1.8.3.js"></script>
        <script src="jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.js"></script>
    </head>
    <body>
        <form action="" method="post">
            Nama: <input type="text" name="nama[0]" id="nama-0" class="nama"/>
            Kelas: <input type="text" name="kelas[0]" id="kelas-0"/>
            </br>
            Nama: <input type="text" name="nama[1]" id="nama-1" class="nama"/>
            Kelas: <input type="text" name="kelas[1]" id="kelas-1"/>
            </br>
            Nama: <input type="text" name="nama[2]" id="nama-2" class="nama"/>
            Kelas: <input type="text" name="kelas[2]" id="kelas-2"/>
        </form>
        <script>
            
            $(function() {
                
                
                $( ".nama" ).autocomplete({
                    source: "get_nama.php",
                    minLength: 2,
                    select: function( event, ui ) {
                        $(event.target).val(ui.item.nama);
                        $(event.target).next().next().val(ui.item.kelas);
                    }
                });
            });
            
        </script>
    </body>
</html>