自动完成数据不会出现在 bootstrap 模式中，但只会出现列表

Question

我在自动完成 bootstrap 模式时遇到问题。当我输入关键字搜索这本书时，但只出现黑点。有什么解决办法吗？正如您在图片中看到的那样，我尝试添加 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网络，然后查看数组中的数据objects

Answer 1

我遇到了同样的问题。这是因为 z-index。 Bootstrap 模态的 z-index=1050。 jquery-ui 菜单的 z-index=100。

你可以使用这个：

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

}

Answer 2

               $data[] = array(
                    'label' => $row['judul_buku'], //solved this
                    'judul_buku' => $row['judul_buku'],
                    'isbn_buku'  => $row['isbn_buku'],
                    'kode_buku'  => $row['kode_buku']
                );

自动完成数据不会出现在 bootstrap 模式中，但只会出现列表

autocomplete data does not appear in bootstrap modal, but only the list appears

javascript

jquery

codeigniter

jquery-ui

bootstrap-4