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.pngScreenshot 2020-11-26 193243.png
ketika saya inspect element html, value listnya kosong
Screenshot-2020-11-26-193509.pngScreenshot 2020-11-26 193509.png
avatar waziat

@waziat

22 Kontribusi 5 Poin


Jawaban Terpilih

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']
);
avatar waziat

@waziat

22 Kontribusi 5 Poin

Jawaban

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.
Solusinya coba ubah metode CheckingBooknya jadi seperti ini :

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');
		}
	}

Tapi, kalo kamu mau tetap gunain response datanya yang berupa JSON array of object, coba pelajari referensi berikut :
https://stackoverflow.com/questions/1592048/jquery-autocomplete-with-json-response
https://stackoverflow.com/questions/12370614/jquery-ui-autocomplete-with-json-from-url

Semoga membantu.
avatar ahanafi

@ahanafi

652 Kontribusi 397 Poin

  • 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. - @waziat


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.

avatar waziat

@waziat

22 Kontribusi 5 Poin


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. 
avatar ahanafi

@ahanafi

652 Kontribusi 397 Poin


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']
);
avatar waziat

@waziat

22 Kontribusi 5 Poin


Login untuk gabung berdiskusi