时间戳

首页 > 解决方案 > 自动完成数据不会出现在引导模式中，而只会出现列表

javascript - 自动完成数据不会出现在引导模式中，而只会出现列表

问题描述

我在自动完成引导模式时遇到问题。当我输入关键字搜索该书，但只出现黑点。有什么解决办法吗？正如您在图像中看到的那样，我尝试添加 CSS z-index 但结果仍然相同。 在此处输入图像描述

public function CheckingBook()
{
    if ($this->input->is_ajax_request()) {
        if ( isset($_GET['term']) ) {
            $result = $this->book_model->GetBookByTitle($_GET['term']);
            if (count($result) > 0) {
                foreach ($result as $row) {
                    
                    $data[] = array(
                        'judul_buku' => $row['judul_buku'],
                        'isbn_buku'  => $row['isbn_buku'],
                        'kode_buku'  => $row['kode_buku']
                    );
                }
            } else {
                $data = [
                    'msg' => 'error',
                    'gagal' => 'Tidak ada data yang ditemukan' 
                ];
            }
        } else {
            $data = [
                'msg' => 'error',
                'gagal' => 'Tidak ada data yang di inputkan' 
            ];
        }
        echo json_encode($data);
    } else {
        $this->session->set_flashdata('error', 'Tidak punya akses langsung kehalaman tersebut');
        redirect(base_url('adminpage/book'),'refresh');
    }
}

这是jQuery自动完成

$('#bookTitleAdd').autocomplete({
    source: '/perpustakaan/adminpage/book/CheckingBook',
    select : function (event,ui) {
        $('#bookTitleAdd').val(ui.item.judul_buku)
        $('#bookISBNAdd').val(ui.item.isbn_buku)
    }
});

<input type="text" name="judulBuku" class="form-control" id="bookTitleAdd" placeholder="Judul Buku" autocomplete="off">

我尝试查看 xhr 网络，然后查看数组中的数据对象 在此处输入图像描述

标签： javascriptjquerycodeigniterjquery-uibootstrap-4

解决方案

我有同样的问题。这是因为z-index。Boostrap 模态的 z-index=1050。jquery-ui 菜单的 z-index=100。

你可以使用这个：

.ui-menu.ui-autocomplete.ui-front {
z-index: 1100;

}

推荐阅读