Postingan lainnya
autocomplete tidak tampil di modal bootstrap
saya mau membuat autocomplete di bootstrap tapi tidak ada data yang muncul. ketika saya inspect element html. list data muncul tapi tidak ada value dari list tersebut
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[] = $row['judul_buku'];
$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');
}
}
$('#bookTitleAdd').autocomplete({
source: '/perpustakaan/adminpage/book/CheckingBook',
select : function (event,ui) {
$('#bookTitleAdd').val(ui.item.judul_buku);
}
});
<input type="text" name="judulBuku" class="form-control" id="bookTitleAdd" placeholder="Judul Buku" autocomplete="off">
ketika saya lihat respons network browser. saya melihat data berbentuk objek dalam array
Screenshot 2020-11-26 193243.png
ketika saya inspect element html, value listnya kosong
Screenshot 2020-11-26 193509.png
4 Jawaban:
<div>Setau saya, library jQuery Autocomplete itu biasanya menerima jenis data berupa array 1 dimensi, sedangkan yang response yang agan berika dari method CheckingBook itu berupa JSON array of object, mungkin inilah penyebabnya.<br>Solusinya coba ubah metode CheckingBooknya jadi seperti ini :<br><br></div><pre>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[] = $row['judul_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'); } }</pre><div><br>Tapi, kalo kamu mau tetap gunain response datanya yang berupa JSON array of object, coba pelajari referensi berikut :<br><a href="https://stackoverflow.com/questions/1592048/jquery-autocomplete-with-json-response">https://stackoverflow.com/questions/1592048/jquery-autocomplete-with-json-response</a><br><a href="https://stackoverflow.com/questions/12370614/jquery-ui-autocomplete-with-json-from-url">https://stackoverflow.com/questions/12370614/jquery-ui-autocomplete-with-json-from-url</a><br><br>Semoga membantu.</div>
Tanggapan
iya mas, klo array 1 dimensi, hasilnya ada. nah knapa saya pakai array object. rencana saya. nilai yg lain saya akan masukkan ke value lain. misalnya ISBN akan terisi otomatis gitu mas.
<div>iya mas, klo array 1 dimensi, hasilnya ada. nah knapa saya pakai array object. rencana saya. nilai yg lain saya akan masukkan ke value lain. misalnya ISBN akan terisi otomatis gitu mas.<br><br></div>
<div>Coba cek referensi yang tadi saya cantumkan di atas, atau bisa juga dengan event onchange, jadi ketika input judul buku nya isinya berubah, lakukan request Ajax lagi untuk mengisi inputan ISBN nya. </div>
Jawaban Terpilih
<pre>makasih mas, jawabnnya udah ketemu. harus ada kata kunci "label" di key arraynya $data[] = array( 'judul_buku' => $row['judul_buku'], 'isbn_buku' => $row['isbn_buku'], 'kode_buku' => $row['kode_buku'] ); key harus ada label $data[] = array( 'label' => $row['judul_buku'], 'isbn_buku' => $row['isbn_buku'], 'kode_buku' => $row['kode_buku'] );</pre>