javascript - 具有模式 Bootstrap 的自动完成 Codeigniter 不起作用

Question

我不知道为什么以及如何解决我的问题。我正在使用 CodeIgniter，并且我想在模式 Bootstrap 上为我的表单创建自动完成。

首先，让我向您展示我的模型。

    function getBarangAjax($keyword){
    $this->db->order_by('barang_id', 'DESC');
    $this->db->like('barang_kode', $keyword);
    return $this->db->get('barang')->result_array();
}

这是我的 Controller 。

    public function getKodeBarangAjax(){
    $keyword = $this->input->post('keyword');
    $data = $this->Model_App->getBarangAjax($keyword);
    echo json_encode($data);
}

这是我对模态的看法。

<div class="modal fade" id="modalAddTransaction" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Transaksi Baru</h4>
        </div>

        <form class="form-horizontal" id="formAddTransaksi" method="post" action="<?php echo site_url('cAdminPage/') ?>">
        <div class="modal-body">

            <div class="form-group">
                <label class="col-lg-2 control-label">Pilih Transaksi</label>
                <div class="col-lg-3">
                    <select class="form-control" name="transaksiType" id="transaksiType" aria-describedby="basic-addon1">
                        <option value=""></option> 
                        <option value="Regular">Regular</option> 
                        <option value="Reseller">Reseller</option> 
                        <option value="Dropshipper">Dropshipper</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-lg-2 control-label">Invoice</label>
                <div class="col-lg-3">
                    <input type="text" class="form-control" name="transaksiInvoice" id="transaksiInvoice" aria-describedby="basic-addon1" />
                </div>
            </div>              

            <div class="form-group">
                <label class="col-lg-2 control-label">Tanggal</label>
                <div class="col-lg-3">
                    <input type="text" class="form-control" name="transaksiTanggal" id="transaksiTanggal" aria-describedby="basic-addon1" />
                </div>
            </div>

            <div class="form-group">
                <label class="col-lg-2 control-label">Pelanggan</label>
                <div class="col-lg-3">
                    <input type="text" class="form-control" name="transaksiPelanggan" id="transaksiPelanggan" aria-describedby="basic-addon1" />
                </div>
            </div>

            <div class="form-group">
                <label class="col-lg-2 control-label">Kode Barang</label>
                <div class="col-lg-3">
                    <input type="text" class="form-control" autocomplete="off" name="transaksiKodeBarang" id="transaksiKodeBarang" aria-describedby="basic-addon1" />
                    <ul class="dropdown-menu txtbarang" style="margin-left:15px;margin-right:0px" role="menu" aria-labelledby="dropdownMenu" id="DropdownBarang">
                    </ul>   
                </div>
            </div>

            <div class="form-group">
                <label class="col-lg-2 control-label">Quantity</label>
                <div class="col-lg-3">
                    <input type="text" class="form-control" name="transaksiQty" id="transaksiQty" aria-describedby="basic-addon1" />
                </div>
            </div>

            <div class="form-group">
                <label class="col-lg-2 control-label">Harga /pcs</label>
                <div class="col-lg-3">
                    <input type="text" class="form-control" name="transaksiHarga" id="transaksiHarga" aria-describedby="basic-addon1" />
                </div>
            </div>

            <div class="form-group">
                <label class="col-lg-2 control-label">Total Pembayaran</label>
                <div class="col-lg-3">
                    <input type="text" class="form-control" name="transaksiTotalHarga" id="transaksiTotalHarga" aria-describedby="basic-addon1" />
                </div>
            </div>

            <div class="form-group">
                <label class="col-lg-2 control-label">Created by</label>
                <div class="col-lg-3">
                    <input type="text" class="form-control" value="<?php echo ($this->session->userdata('nama')) ?>" name="transaksiCreatedBy" id="transaksiCreatedBy" aria-describedby="basic-addon1" readonly />
                </div>
            </div>

            <div class="form-group">
                <label class="col-lg-2 control-label">Created at</label>
                <div class="col-lg-3">
                    <input type="text" class="form-control" value="<?php echo date('Y-m-d H:i:s') ?>" name="transaksiCreatedAt" id="transaksiCreatedAt" aria-describedby="basic-addon1" readonly />
                </div>
            </div>
        </div>

        <div class="modal-footer">
            <button type="submit" id="simpan" class="btn btn-sm btn-primary">Save</button>
            <button type="button" id="reset" class="btn btn-sm btn-primary">Reset</button>
            <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal">Close</button>
        </div>
            </form>     
    </div>
</div>

这是我的 js。

    $(document).ready(function() {
    $(".addTransaksi").click(function(){
    $('#modalAddTransaction').modal('show');

    $("#transaksiKodeBarang").keyup(function(){
        $.ajax({
            type: "POST",
            url: '<?php echo site_url('cAdminPage/getKodeBarangAjax'); ?>',
            data: {
                keyword: $("#transaksiKodeBarang").val()
            },
            dataType: "json";
            success: function (data){
                if (data.length > 0){
                    $('#DropdownBarang').empty();
                    $('#transaksiKodeBarang').attr("data-toggle", "dropdown");
                    $('#DropdownBarang').dropdown('toggle');
                }else if (data.length == 0){
                    $('#transaksiKodeBarang').attr("data-toggle", "");
                }
                $.each(data, function (key,value){
                    if (data.length >= 0)
                        $('#DropdownBarang').append('<li role="presentation" ><a role="menuitem dropdownnameli" class="dropdownlivalue">' + value['barang_kode'] + '</a></li>');
                });
            }
        });
    });
    $('ul.txtbarang').on('click', 'li a', function () {
        $('#transaksiKodeBarang').val($(this).text());
    });
    });
});

模式未显示。自动完成的关键字是 transaksiKodeBarang
请指教，我哪里出错了？
谢谢。

Answer 1

确保 class="form-control"使选择框隐藏。