membuat autocomplete multiple textinput dengan jquery ui

thonkghie

mas, mbak semuanya. mau minta bantuannya
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


ini ane kasih screnshhotnya

form input yang keluar autocompletenya

*klik gambar untuk perbesar


form input yang gak keluar autocompletenya

*klik gambar untuk perbesar

sacredbluerose

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

thonkghie

ok om saya coba dulu ya


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

setelah saya coba tetep gak bisa mas

sacredbluerose

javascriptnya dah diubah juga?

thonkghie

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

andyjatmiko1928

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

andyjatmiko1928

<button type="button" id="racikan" onclick="additem(); return false"><span></span><b>Racikan</b></button>

andyjatmiko1928

<p class="cari"></p>

lobster

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