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

Bagaimana menampilkan hasil data menggunakan typehead bootstrap multiple field ?

Hello brader....

saya punya code sederhana menggunakan typehead bootstrap multiple field (gambar terlampir).
multifield

untuk pencarian form pertama berjalan normal, namun saat add form tidak dapat berjalan normal pada pencarian selanjutnya.

berikut salinan kodenya

<script> $(function($) { _.compile = function(templ) { var compiled = this.template(templ); compiled.render = function(ctx) { return this(ctx); } return compiled; } $('.pegawai-typeahead').typeahead({ template: '<p><strong><%= nama %></strong>', name: 'namax', valueKey: 'nama', engine: _, local: [ { "nama":"Anton","nip":"19640709","golongan":"II/e","jabatan":"Dir 1" }, { "nama":"Rita","nip":"19580503","golongan":"II/e","jabatan":"Dir 2" }, { "nama":"Indra","nip":"19580517","golongan":"I1/e","jabatan":"Dir 3" } ] }).on('typeahead:selected', function(event, datum) { $('#nip').val(datum.nip); $('#jabatan').val(datum.jabatan); $('#golongan').val(datum.golongan); }); }); </script>


html nya
<div class="panel-body"> <div class="col-sm-3 nopadding"> <div class="form-group"> <input type="text" class="pegawai-typeahead" id="nama" name="nama[]" value="" placeholder="nama"> </div> </div> <div class="col-sm-3 nopadding"> <div class="form-group"> <input type="text" class="form-control" id="nip" name="nip[]" value="" placeholder="nip"> </div> </div> <div class="col-sm-3 nopadding"> <div class="form-group"> <input type="text" class="form-control" id="jabatan" name="jabatan[]" value="" placeholder="jabatan"> </div> </div> <div class="col-sm-3 nopadding"> <div class="form-group"> <div class="input-group"> <input type="text" class="form-control" id="golongan" name="golongan[]" value="" placeholder="golongan"> <div class="input-group-btn"> <button class="btn btn-success" type="button" onclick="add_fields();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button> </div> </div> </div> </div> <div id="add_fields"> </div> <div class="clear"></div> </div>

<script type="text/javascript"> var room = 1; function add_fields() { room++; var objTo = document.getElementById('add_fields') var divtest = document.createElement("div"); divtest.setAttribute("class", "form-group removeclass"+room); var rdiv = 'removeclass'+room; divtest.innerHTML = '<div class="col-sm-3 nopadding"><div class="form-group"><input type="text" class="pegawai-typeahead" id="nama" name="nama[]" value="" placeholder="nama"></div></div><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" id="nip" name="nip[]" value="" placeholder="nip"></div></div><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" id="jabatan" name="jabatan[]" value="" placeholder="jabatan"></div></div><div class="col-sm-3 nopadding"><div class="form-group"><div class="input-group"> <input type="text" class="form-control" id="golongan" name="golongan[]" value="" placeholder="golongan"><div class="input-group-btn"> <button class="btn btn-danger" type="button" onclick="remove_add_fields('+ room +');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div><div class="clear"></div>'; objTo.appendChild(divtest) } function remove_add_fields(rid) { $('.removeclass'+rid).remove(); } </script>

Mohon pencerahan dari para guru...

Comments

  • edited December 2017
    ini ndak ngomongin framework atau apa ...

    dipahami dulu cara kerja javascript nya yg berhubungan ama html.

    contoh form + js kaya begini :

    [A]
    ------------------------------------------------------------
    <input type="button" value="tambah" onclick="tambah()">
    <div id="container">
    <input type="text" class="input"><br>
    </div>

    <script>
    var ip=document.getElementsByClassName("input");
    for(index in ip) alert("index="+index+" | element="+ip[index].tagName);
    </script>
    ------------------------------------------------------------

    coba elo jalankan, alert apa yg keluar ? perhatikan baik-baik.

    hanya ada SATU input yg pake class "input", dengan TAG / element INPUT.
    itu terbaca saat index = 0 ... index lainnya tidak menunjuk ke object element


    [B]
    ------------------------------------------------------------
    <input type="button" value="tambah" onclick="tambah()">
    <div id="container">
    <input type="text" class="input"><br>
    <input type="text" class="input"><br>
    </div>

    <script>
    var ip=document.getElementsByClassName("input");
    for(index in ip) alert("index="+index+" | element="+ip[index].tagName);
    </script>
    ------------------------------------------------------------

    coba elo jalankan, alert apa yg keluar ? perhatikan baik-baik.

    hanya ada DUA input yg pake class "input", dengan TAG / element INPUT.
    itu terbaca saat index = 0 dan 1 ... index lainnya tidak menunjuk ke object element

    JADI ...
    kalo elo mau melekatkan "SESUATU" yg diambil pake method "Elements" (pake S, multi / banyak, karena ada getElementById yg tanpa S, karena HANYA bisa ambil 1 element, itu mengapa ID element tidak boleh kembar), hanya elo proses saat index adalah angka.


    [C]
    ------------------------------------------------------------
    <input type="button" value="tambah" onclick="tambah()">
    <div id="container">
    <input type="text" class="input" value="123"><br>
    <input type="text" class="input" value="456"><br>
    </div>

    <script>
    var ip=document.getElementsByClassName("input");
    for(index in ip) if(!isNaN(index)) { ip[index].onclick=function() {alert(this.value);}; }
    </script>
    ------------------------------------------------------------

    coba jalankan, lalu clik pada salah satu input text yg ada.

    !isNaN(...) ... hanya mem-proses yg index nya angka.
    .onclick=function() ... melekatkan fungsi ke event onclick di element yg dimau

    karena saat awal yg terbaca hanya ada index 0 & 1 ...
    ya event onclick nya cuma nempel di 2 element itu.


    sampai sini masih paham yah ?
  • edited December 2017
    [D]
    ------------------------------------------------------------
    <input type="button" value="tambah" onclick="tambah()">
    <div id="container">
    <input type="text" class="input" value="123"><br>
    <input type="text" class="input" value="456"><br>
    </div>

    <script>
    function tambah() {
    var container=document.getElementById("container");
    var container_html=container.innerHTML;

    container_html=container_html+'<input type="text" class="input" value="abc"><br>'+"\n";

    container.innerHTML=container_html;
    }

    var ip=document.getElementsByClassName("input");
    for(index in ip) if(!isNaN(index)) { ip[index].onclick=function() {alert(this.value);}; }
    </script>
    ------------------------------------------------------------

    sekarang ada fungsi tambah().

    coba elo jalankan.
    klik input text 2 yg awal ... bisa ? event onclick nya jalan ?

    lalu klik button tambah ...
    ada input text baru ?
    coba elo klik ke SEMUA input text yg sekarang ada ... bisa ? event onclick nya jalan ?


    [E]
    ------------------------------------------------------------
    <input type="button" value="tambah" onclick="tambah()">
    <div id="container">
    <input type="text" class="input" value="123"><br>
    <input type="text" class="input" value="456"><br>
    </div>

    <script>
    function tambah() {
    var container=document.getElementById("container");

    var input_text=document.createElement("INPUT");
    input_text.setAttribute("type", "text");
    input_text.setAttribute("class", "input");
    input_text.value="abc";

    container.appendChild(input_text);
    container.appendChild(document.createElement("BR"));
    }

    var ip=document.getElementsByClassName("input");
    for(index in ip) if(!isNaN(index)) { ip[index].onclick=function() {alert(this.value);}; }
    </script>
    ------------------------------------------------------------

    fungsi tambah() tetep ada, tapi bukan pake .innerHTML.
    pakenya createElement().

    coba elo jalankan.
    klik input text 2 yg awal ... bisa ? event onclick nya jalan ?

    lalu klik button tambah ...
    ada input text baru ?
    coba elo klik ke SEMUA input text yg sekarang ada ... bisa ? event onclick nya jalan ?


    apa beda hasil dari [D] dan [E] ?

    bisa elo logika kenapa beda ?
    apa sebabnya ?
  • edited December 2017
    [F]
    ------------------------------------------------------------
    <input type="button" value="tambah" onclick="tambah()">
    <div id="container">
    <input type="text" class="input" value="123"><br>
    <input type="text" class="input" value="456"><br>
    </div>

    <script>
    function tambah() {
    var container=document.getElementById("container");

    var input_text=document.createElement("INPUT");
    input_text.setAttribute("type", "text");
    input_text.setAttribute("class", "input");
    input_text.value="abc";

    input_text.onclick=function() {alert(this.value);};

    container.appendChild(input_text);
    container.appendChild(document.createElement("BR"));
    }

    var ip=document.getElementsByClassName("input");
    for(index in ip) if(!isNaN(index)) { ip[index].onclick=function() {alert(this.value);}; }
    </script>
    ------------------------------------------------------------

    fungsi tambah() tetep ada, tapi bukan pake .innerHTML.
    pakenya createElement().
    di dalamnya juga ada definisi event onclick buat element yg baru.

    coba elo jalankan.
    klik input text 2 yg awal ... bisa ? event onclick nya jalan ?

    lalu klik button tambah ...
    ada input text baru ?
    coba elo klik ke SEMUA input text yg sekarang ada ... bisa ? event onclick nya jalan ?


    kira-kira bisa menyimpulkan kenapa koding elo bermasalah ?
  • edited December 2017
    terakhir ...

    [G]
    ------------------------------------------------------------
    <input type="button" value="tambah" onclick="tambah()">
    <div id="container">
    <input type="text" class="input" value="123" onclick="alert(this.value);"><br>
    <input type="text" class="input" value="456" onclick="alert(this.value);"><br>
    </div>

    <script>
    function tambah() {
    var container=document.getElementById("container");
    var container_html=container.innerHTML;

    container_html=container_html+'<input type="text" class="input" value="abc" onclick="alert(this.value);"><br>'+"\n";

    container.innerHTML=container_html;
    }
    </script>
    ------------------------------------------------------------

    kembali pake innerHTML.
    tapi dgn definisi onclik yg sudah dari awal di definisikan di element nya.
    bukan dilekatkan setelah element ada.

    saat tambah element baru, onclick juga di definisikan langsung di string tambahan element nya.


    coba elo jalankan.
    klik input text 2 yg awal ... bisa ? event onclick nya jalan ?

    lalu klik button tambah ...
    ada input text baru ?
    coba elo klik ke SEMUA input text yg sekarang ada ... bisa ? event onclick nya jalan ?


    bisa menyimpulkan kenapa kalo model kaya begini pake innerHTML juga bisa jalan ?
  • lagi di test A ampe G
  • dipahami yah ... itu levelnya lebih medium buat pemahaman javascript ...

    tapi sering bikin salah logika.
  • [A] [B] & [C] ... gw anggap sudah jelas, dasar banget.


    [D] ...
    karena .innerHTML itu hanya baca "STRING" dari isi element.
    semua event ditinggal / tidak dibaca

    jadinya, saat dikembalikan ke .innerHTML, ya yg "nempel" cuma "STRING"
    semua event hilang.

    mau pake model
    element.innerHTML+= "... element baru ...";
    ndak ngaruh, sama saja.


    [E] ...
    langkahnya sudah setengah bener ... tapiiiii ...

    pelekatan event onclick HANYA ADA DI AWAL, saat halaman dibuka.
    otomatis hanya akan dilekatkan ke element yg index 0 & 1.

    kalo ada element baru, otomatis ya ndak ada proses pelekatan event onclick di element yg baru.
    kalo ada element baru, ya harus melekatkan sendiri / lagi event onclick di element itu


    [F] ...
    sudah bener ...

    event onclick dilekatkan ke element yg baru.


    [G] ...
    kalo ini, tidak ada proses pelekatan event onclik setelah element ada.

    memang dari awal onclik nya ditulis gabung dengan string element.
    jadi saat dibaca pake innerHTML, ya definisi oncliknya juga ada, sebagai "STRING".

    tapi saat tambah element baru, onclick baru tetep harus ditulis juga.
  • edited December 2017
    ... kalo liat model koding elo ...

    elo definisi element baru pake innerHTML.

    [1] pelekatan event hanya ada di awal, di element yg baru tidak ada (baca [E])

    [2] elo nulis element baru pake innerHTML, ya mau ndak mau elo pake cara [G], tulis event langsung di string html element baru nya.
  • terima kasih om labalaba atas elmunya

    iya aq pke cara G, untuk event onclick memang lancar2 saja,
    namun typeahead tidak berjalan untuk form tambah selanjutnya
  • edited December 2017
    event nya elo lekatkan di string element baru ...

    event apa to yg elo pake ?
    coba baca koding elo sendiri baik-baik.
    sama saja.

    iya, bukan onclick.

    .on('typeahead:selected', function(event, datum)

    itu kan ?
    itu event apa ?

    on... ?

    html cuma punya event ini :
    https://www.w3schools.com/jsref/dom_obj_event.asp
  • edited December 2017
    cuma panggil class="pegawai-typeahead"
  • edited December 2017
    :D

    kalo liat modelnya event yg cocok itu onkeyup.

    tapi mendingan elo buatkan fungsi baru utk pencariannya.
    model awal elo juga elo ubah pake fungsi yg sama.
    data juga elo keluarkan dari definisi fungsi awal elo, biar bisa dipake bersama.

    jadi kira-kira begini :

    var data=[
    ...
    ];

    function searchdata(...) {
    ...
    }

    // definisi fungsi awal elo di sesuaikan pake data dan fungsi pencarian yg sama



    lalu di innerHTML elo :

    ... <input type="text" class="pegawai-typeahead" id="nama" name="nama[]" value="" placeholder="nama" onkeyup="searchdata(...)"> ...
  • tak coba dulu
  • edited December 2017
    btw ...

    definisi ini di koding awal elo ...

    $('#nip').val(datum.nip);
    $('#jabatan').val(datum.jabatan);
    $('#golongan').val(datum.golongan);

    mestinya bermasalah.
    itu mengganti semua element yg ber-ID tsb.

    tapi ID elo kembar semua.
    yg terambil / terupdate pasti hanya yg PERTAMA.

    elo belum liat salahnya karena kebetulan script tambah elo ndak jalan.
Sign In or Register to comment.