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

membuat autocomplete multiple textinput dengan jquery ui

mas, mbak semuanya. mau minta bantuannya :D
saya mau membuat autocomplete di beberapa text input
ane cerita dulu aja ye...

pertama ini source form inputnya


<div id="dialogtambahbarangmasuk" title="Tambah barang masuk" style="display:none" class="dialogbarangmasuk">                
<table align="center" cellpadding="0" width="700">
<tbody><tr><td>Jenis Bahan</td><td>Nama Bahan</td><td>Jumlah Barang</td><td>Satuan</td><td>Harga Barang</td><td><a href="javascript:void(0);" class="add" rel=".clone" onclick="counttambahjmlbrngmasuk()"><img src="../image/ico-aksi/ico-tambah.png" height="18"></a></td></tr>
<tr class="clone">
<td>
<input tabindex="1" name="kategoribarangmasuk" id="kategoribarangmasuk" type="text">
<input tabindex="1" name="idkategoribarangmasuk" id="idkategoribarangmasuk" type="hidden">
</td>
<td><input tabindex="1" name="namabarangmasuk" id="namabarangmasuk" size="10" type="text"></td>
<td><input tabindex="1" name="jumlahbarangmasuk" id="jumlahbarangmasuk" size="10" type="text"></td>
<td><input tabindex="1" name="satuanbarangmasuk" id="satuanbarangmasuk" size="10" type="text"></td>
<td><input tabindex="1" name="hargabarangmasuk" id="hargabarangmasuk" size="10" type="text"></td>
</tr>
</tbody></table>
 
</div>


trus ini untuk code javascriptnya
$(function() {
 
$('#kategoribarangmasuk').autocomplete({
minLength:0,
delay: 0,
source: 'searching.php?aksi=autocomplete&amp;cont=kategoribarangmasuk',
focus: function (event, ui) {
 
document.getElementById('idkategoribarangmasuk').value = ui.item.id;
},
open: function(){
$(this).autocomplete('widget').css('z-index', 1000);
return false;
},
});
 
$('#namabarangmasuk').autocomplete({
minLength:0,
source: 'searching.php?aksi=autocomplete&amp;cont=namabarangmasuk',
open: function(){
$(this).autocomplete('widget').css('z-index', 1000);
return false;
},
});
 
var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().fadeIn(function(){ $(this).remove(countkurangjmlbrngmasuk()) }); return false;"><img src="../image/ico-aksi/ico-hapusdata.png" height="18"></a>';
$('a.add').relCopy({
append: removeLink,
limit: 1000,
});
});


nah ane jelasin dulu gan. itu untuk form input nya bisa di duplikat pake javascript relcopy. trus input yang id nya kategoribarangmasuk dan namabarangmasuk itu saya pakein autocomplete. nah yang saya tanyain kenapa auto complete pada input baris pertama bisa jalan sedangkan pada input hasil relcopy nya gak bisa jalan. ya cuma input paling atas aja yang bisa jalan. mungkin ada yang bisa bantu ? terima kasih sebelumnya :D


ini ane kasih screnshhotnya

form input yang keluar autocompletenya
image
*klik gambar untuk perbesar


form input yang gak keluar autocompletenya
image
*klik gambar untuk perbesar

Comments

  • coba atribut id nya diganti jadi class.. maksud saya, yg id=kategoribarangmasuk itu jadi class aja buat.

  • edited September 2013
    ok om saya coba dulu ya


    ---------------------------------------------------------
    edit :

    setelah saya coba tetep gak bisa mas :D
  • javascriptnya dah diubah juga? :)
  • udah mas jadi seperti ini

    <div id="dialogtambahbarangmasuk" title="Tambah barang masuk" style="display:none" class="dialogbarangmasuk">                
    <table align="center" cellpadding="0" width="700">
    <tbody><tr><td>Jenis Bahan</td><td>Nama Bahan</td><td>Jumlah Barang</td><td>Satuan</td><td>Harga Barang</td><td><a href="javascript:void(0);" class="add" rel=".clone" onclick="counttambahjmlbrngmasuk()"><img src="../image/ico-aksi/ico-tambah.png" height="18"></a></td></tr>
    <tr class="clone">
    <td>
    <input tabindex="1" name="kategoribarangmasuk" class="kategoribarangmasuk" type="text">
    <input tabindex="1" name="idkategoribarangmasuk" class="idkategoribarangmasuk" type="hidden">
    </td>
    <td><input tabindex="1" name="namabarangmasuk" class="namabarangmasuk" size="10" type="text"></td>
    <td><input tabindex="1" name="jumlahbarangmasuk" id="jumlahbarangmasuk" size="10" type="text"></td>
    <td><input tabindex="1" name="satuanbarangmasuk" id="satuanbarangmasuk" size="10" type="text"></td>
    <td><input tabindex="1" name="hargabarangmasuk" id="hargabarangmasuk" size="10" type="text"></td>
    </tr>
    </tbody></table>
     
    </div>


    trus ini untuk code javascriptnya
    $(function() {
     
    $('.kategoribarangmasuk').autocomplete({
    minLength:0,
    delay: 0,
    source: 'searching.php?aksi=autocomplete&amp;cont=kategoribarangmasuk',
    focus: function (event, ui) {
     
    document.getElementByClassName('idkategoribarangmasuk').value = ui.item.id;
    },
    open: function(){
    $(this).autocomplete('widget').css('z-index', 1000);
    return false;
    },
    });
     
    $('.namabarangmasuk').autocomplete({
    minLength:0,
    source: 'searching.php?aksi=autocomplete&amp;cont=namabarangmasuk',
    open: function(){
    $(this).autocomplete('widget').css('z-index', 1000);
    return false;
    },
    });
     
    var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().fadeIn(function(){ $(this).remove(countkurangjmlbrngmasuk()) }); return false;"><img src="../image/ico-aksi/ico-hapusdata.png" height="18"></a>';
    $('a.add').relCopy({
    append: removeLink,
    limit: 1000,
    });
    });


    tapi tetep aja gak bisa mas :D
  • edited June 2016
    <script type="text/javascript">
    var id;
    var stre;
    $(document).ready(function(){

    $("#racikan").click(function() {
    stre="<div id='srow" + id + "'><a href='' class='' onclick='hapusElemen(\"#srow" + id + "\"); return false;'><span class='glyphicon glyphicon-remove' style='color:red;'></span></a><div class='input-group col-md-3' style='margin-left:20px; margin-top:-17px;'><input type='text' name='cari[]' class='inputText form-control obat'><span class='input-group-btn'><button class='btn btn-default' type='button'><span class='glyphicon glyphicon-search'></span></button></span></div></div><p></p>";
                $(".cari").append(stre).find("input").autocomplete({
    source:'obat_resep/get_list_obat', 
    minLength:2,
    })
    .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
         return $( "<li>" )
          .data( "ui-autocomplete-item", item )
           .append("<a>"+ item.value +"<br><small>Stok: <i>" + item.stok + "</i><br>Expired date: <i>" + item.ed + "</i></small></a>")
           .appendTo( ul )
    };
                id = (id-1) + 2;
                document.getElementById("id").value = id;
    });
    });

    function hapusElemen(id) {
                $(id).remove();
    }
    </script>
  • <button type="button" id="racikan" onclick="additem(); return false"><span></span><b>Racikan</b></button>
  • <p class="cari"></p>
  • jika tidak berhubungan dgn pertanyaan awal : BIKIN TOPIK PERTANYAAN BARU !!!

    jika ini pertanyaan : mana pertanyaannya ?

    jika ini jawaban : ini tret tahun 2013, emang selama 3 tahun TS masih berkutat di masalah yg sama ?

    :-w :-w :-w
This discussion has been closed.