Tolong pilih kategori sesuai, jenis posting (diskusi atau bukan) dan sertakan tag/topik yang sesuai seperti komputer, java, php, mysql, dll. Promosi atau posting tidak pada tempatnya akan kami hapus!
- Bagi Anda yang ingin mendaftar, baca link berikut:
http://diskusiweb.com/discussion/50491/how-to-registrasi-diskusiweb-com-baca-ini-terlebih-dahulu
- 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
- Cara posting gambar/image di post Anda: http://www.diskusiweb.com/discussion/47345/cara-menyisipkan-menyertakan-image-pada-posting/p1

Auto Text Box Suggest + Auto Complete

Malam para sesepuh diskusi web.
saya punya pertanyaan tentang auto text box suggest + auto complete.
gambaran progx seperti ini.

image
jadi ketika di ketik huruf di text box nama akan muncul kotak suggest yg di ambil dari tabel Siswa mis dari database, dan ketika di click nama siswanya Alamat dan Telp otomatis terisi sesuai dengan nama yg di pilih pada text box nama. Mohon pencerahan dari teman2 jika ada yg pernah mengerjakannya. 
Tagged:

Comments

  • sudah mengerti ajax ?
  • sedikit Mengerti.
  • ya emang pake ajax ...

    awalnya mirip dgn yg di sini
    itu pake <select> event onchange

    yg mau dibuat pake <input> event onkeyup

    coba dikembangkan dolo
  • edited November 2012
    sa sudah kembangkan dngan menggabungkan OnkeyUp dangan OnChange.
    onKeyup untuk menampilkan list data dari database, sdangkan onchange mengambil nilai dari yg di pilih kmudian mnampilkan isi dari alamat dan telp pada textbox masing2. Masalh yg saya temukan adalah javascript hanya menerima huruf yg saya ketik di text box nama, tidak membaca text yg saya click pada list yg di tampilkan sehingga menyebabkan data yg di tampilkan tdak sesuai.
  • ya kalo sudah bermasalah ama script, ya script nya diposting dimari dong mas'e ...
  • Maaf mas boo baru sempat balas.

    Form Input.PHP

    <!-- TextBox OnKeyUp-->
    <script>
    var cust;
    function vcust(wcust){
    if(wcust.length==0){
    document.getElementById("Ctekssugest").style.visibility = "hidden";
    }else{
    cust = bcust();
    var Curl="keyupdata.php";
    cust.onreadystatechange=Cchange;
    var Cvar = "Ctext="+wcust;
    cust.open("POST",Curl,true);
    //beberapa http header harus kita set kalau menggunakan POST
    cust.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    cust.setRequestHeader("Content-length", Cvar.length);
    cust.setRequestHeader("Connection", "close");
    cust.send(Cvar);
    }
    }
    function bcust(){
    if (window.XMLHttpRequest){
    return new XMLHttpRequest();
    }
    if (window.ActiveXObject){
    return new ActiveXObject("Microsoft.XMLHTTP");
    }
    return null;
    }
    function Cchange(){
    var Cfile;
    if (cust.readyState==4 && cust.status==200){
    Cfile=cust.responseText;
    if(Cfile.length>0){
    document.getElementById("Ctekssugest").innerHTML = Cfile;
    document.getElementById("Ctekssugest").style.visibility = "";
    }else{
    document.getElementById("Ctekssugest").innerHTML = "";
    document.getElementById("Ctekssugest").style.visibility = "hidden";
    }
    }
    }
    function Cisi(wcust){
    document.getElementById("wcust").value = wcust;
    document.getElementById("Ctekssugest").style.visibility = "hidden";
    document.getElementById("Ctekssugest").innerHTML = "";
    }
    </script>

    <!--TextBox One Change-->
    <script>
    var Cid;
    var Cview;

    function Ccust(Cstr)
    {
    Cid=GetXmlHttpObject();
    if (Cid==null){
    alert ("Browser nggak dukung HTTP Request");
    return;
    }
    var CustUrl="searcdata.php";
    CustUrl=CustUrl+"?Cnama="+Cstr;
    CustUrl=CustUrl+"&aa="+Math.random();
    Cid.onreadystatechange=CuststateChanged;
    Cid.open("GET",CustUrl,true);
    Cid.send(null);
    }

    function CuststateChanged(){
    if (Cid.readyState==4){
    Cview = Cid.responseText;
    if(Cview){
    Cview = Cid.responseText.split("|");
    document.getElementById("palamat").value=Cview[0];
    document.getElementById("ptelp").value=Cview[1];
    }else{
    document.getElementById("palamat").value="";
    document.getElementById("ptelp").value="";
    }
    }
    }
    function GetXmlHttpObject(){
    if (window.XMLHttpRequest){
    return new XMLHttpRequest();
    }
    if (window.ActiveXObject){
    return new ActiveXObject("Microsoft.XMLHTTP");
    }
    return null;
    }
    </script>
    <form method="POST" name="input">
    Nama Siswa : <input name='pengirim' type='text' size='50' id='wcust' onKeyUp='vcust(this.value)' onchange='Ccust(this.value)'>
              <div id='Ctekssugest' style='position:absolute; background-color:white;width:200;visibility:hidden;z-index:100'></div><br>
    Alamat : <input type="text" name="alamat" id="palamat"><br>
    Telepon : <input type="text" name="telp" id="ptelp">
    </form>

    Masalah yg saya temukan dari listing java pada di atas adalah onchange tdak menerima data semua teks yg saya pilih tetapi menerima teks yg saya input pada textbox.
  • buat apaan ada onchange disitu ?

    hasil keluaran keyupdata.php apa ?
  • 1. fungsi onchange membaca isian dari textbox kemudian mencari data di database dan menampilkanx pada textbox alamat dan notelp.

    2. Menampikan nama2 yg ada di database.
  • 1. itu mah cukup onkeyup saja
  • edited December 2012
    bisa mintol di perbaiki scriptx mas boo? atau ada masukan script.
  • hapus aja onchange-nya
  • Kalau onchange-nya saya hapus textbox alamat dan telp otomatis tdak bisa terisi secara otomatis dong mas Boo.
  • lhah ?

    kalo itu bukan di event onchange nya text field nya ...
    tapi di onclick dari return nya keyupdata.php

    makanya pan ditanya return nya keyupdata.php apa ?
    biar bisa dilihat onclick nya mesti dipasang dimana ...
  • keyupdata.php

    <?php
    include "../../inc/koneksi.php";

    $wcust = $_POST['Ctext'];
    $query = mysql_query("select nama from siswa where nama like '$wcust%' limit 10");
    while($k=mysql_fetch_array($query)){
    echo '<input type="text" onclick="Cisi(\''.$k[0].'\');" style="cursor:pointer" value=\''.$k[0].'\' size="50"><br>';
    }
    ?>
  • edited December 2012
    fungsi ini : Cisi() ...

    gunakan juga untuk mengupdate text field yg lain
    jadi ndak perlu event onchange (hapus aja)

    atau, panggil dah tuh fungsi Ccust() dari dalem fungsi Cisi() ... dengan parameter disesuaikan

    tapi kalo gw mah lebih milih modifikasi keyupdata.php supaya balikannya gak cuma nama,
    tapi sekalian data lain yg dibutuhin
    lalu Cisi() di ubah sekalian supaya bisa update banyak text field sekaligus
    pan fungsi bisa dibikin pake banyak parameter ... Cisi(text1,text2,text3)
    jadi ndak harus bolak balik rekuwes ke server buat ambil data
  • Oke sip mas boo..
  • masih belajar mengenai pemrograman, mas "." boleh minta script yang full dari bahasan diatas sebab sya awam sekali ajax, terima kasih atas bantuannya sebelumnya

    ini email saya : tadycools@yahoo.com, atau kasih link downloadnya
  • lha yg punya script lengkap nya pan TS yg nanya mas'e ...
    yg jawab mah cuma reply berdasar per posting yg ditulis

    btw,
    kagak bakal ada yg mau jawab / kirim jawaban via email
  • misi numpang nimbrung.. ini saya udah coba tp kok hasil inputannya seperti ini ya? [object HTMLInputElement]
  • koding posting kemari
Sign In or Register to comment.