Postingan lainnya

Buku Ini Koding!

Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!

autocomplate ajax

Tolong bila ada yang paham saya ingin membuat autocomplate ajax dengan menampilkan satu row database kedalam kolom text html. di dalam row database ada 3 row dengan id = 001 nama = mie instan = jumlah = 5. pertanyaan saya: bagamaiana cara membuat spasi diantara 3 row tersebut dan bila pencarian sudah diketemukan bagaimana cara menampilkan di kolom satu jenis row saja yang saya ingin tampilkan id= 001 saja (label : item.KODEBARANG + item.NAMABARANG + item.KETERANGAN,) ini adalah code yang saya tampilkan di satu kolom html contoh yg sy buat

 <html>
<head>
<meta charset="utf-8">
<title> Autocomplete form dengan jqueryui</title>
<link href="css/jquery-ui.min.css" rel="stylesheet">
<style>
element.style {
}
.ewGridUpperPanel.box-header, .ewGridLowerPanel.box-footer {
    padding: 3px;
    border-left: 0;
    border-right: 0;
    background-image: none;
    color: inherit;
}
	.ewGridUpperPanel.box-header {
    background-color: #fc6;
	}
.ewGrid .ewGridUpperPanel {
    border-bottom: 1px solid #8B0000;
}
</style>
</head>

<body>

<form id="frmpegawai">
<div>
Cari Pegawai <input type="text" id="KODEBARANG" autocomplete="" placeholder="Cari Pegawai">
</div>
<div>
Tanggal
</div>
<div>
<input type="text" id="tanggal" name="tanggal" value="<?php echo date("d-m-Y");?>">
</div>
<div>
Nama
</div>
<div>
<input type="text" id="NAMABARANG" readonly>
</div>
<div>
KETERANGAN
</div>
<div>
<textarea id="KETERANGAN" readonly></textarea>
</div>
<div>
Telepon
</div>
<div>
<input type="text" id="SATUAN" readonly>
</div>
<div>
Jenis Kelamin
</div>
<div>
<input type="text" id="BERAT" readonly>
</div>
</form>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script>

   /* autocomplete */
   $('#KODEBARANG').autocomplete({
		delay: 0,
		source: function( request, response ) {

		  $.ajax({
			url: 'master.php',
			dataType: "json",
			data: 'search=' + request.term,
			success: function( data ) {

			  response( $.map( data, function( item ) {
				return {

				  label  		: item.KODEBARANG + item.NAMABARANG + item.KETERANGAN,
				  NAMABARANG  	: item.NAMABARANG,
				  KETERANGAN    : item.KETERANGAN,
				  SATUAN        : item.SATUAN,
				  jk            : item.BERAT


				}

			   }));
			},
			error: function(e){
			  alert('Error: ' + request);
			}
		   });
		},

	});

   /* @end autocomplete */
</script>
        <script src="bootstrap/js/bootstrap.js"></script>
        <script src="datepicker/bootstrap-datepicker.js"></script>

</body>
</html>

Terima kasih agan sekalian

ajax

@Alx17

17 Kontribusi 0 Poin

Diperbarui 6 tahun yang lalu

8 Jawaban:

coba ini spasi <pre> item.KODEBARANG + ' ' + item.NAMABARANG + ' ' + item.KETERANGAN </pre>

@dianarifr

642 Kontribusi 316 Poin

Dipost 6 tahun yang lalu

udah bisa spasinya gan.. tp kalau cara menampilkan di kolom satu jenis row saja id= 001 saja

@Alx17

17 Kontribusi 0 Poin

Dipost 6 tahun yang lalu

maksudnya gan? ane kurang paham

@dianarifr

642 Kontribusi 316 Poin

Dipost 6 tahun yang lalu

Kan pencarian sy memunculkan 3 jenis dikolom pencarian...setelah yg dicari sudah ketemu di data input itu muncul id nya saja

@Alx17

17 Kontribusi 0 Poin

Dipost 6 tahun yang lalu

oh, coba ini <pre> label : item.KODEBARANG + item.NAMABARANG + item.KETERANGAN, NAMABARANG : item.NAMABARANG, KETERANGAN : item.KETERANGAN, SATUAN : item.SATUAN, jk : item.BERAT, value : item.KODEBARANG </pre> yg diambil valuenya adalah kodebarang

@dianarifr

642 Kontribusi 316 Poin

Dipost 6 tahun yang lalu

tetep tidk bisa gan...yang muncul tetap KODEBARANG,NAMABARANG,KETERANGAN

@Alx17

17 Kontribusi 0 Poin

Dipost 6 tahun yang lalu

Jawaban Terpilih

coba ini <pre> $('#KODEBARANG').autocomplete({ delay: 0, source: function( request, response ) {

	  $.ajax({
		url: &#039;master.php&#039;,
		dataType: &quot;json&quot;,
		data: &#039;search=&#039; + request.term,
		success: function( data ) {
		  
		  response( $.map( data, function( item ) {
			return {
			
			  label  		: item.KODEBARANG + item.NAMABARANG + item.KETERANGAN, 
			  NAMABARANG  	: item.NAMABARANG,
			  KETERANGAN    : item.KETERANGAN,
			  SATUAN        : item.SATUAN,
			  jk            : item.BERAT
		
			 
			}
			
		   }));
		},
		error: function(e){  
		  alert(&#039;Error: &#039; + request);  
		}  
	   });
	},
	select: function (event, ui) {
        $(&quot;#KODEBARANG&quot;).text(ui.item.KODEBARANG);
    },

}); &lt;/pre&gt;

@dianarifr

642 Kontribusi 316 Poin

Dipost 6 tahun yang lalu

Terima kasih banyak gan

@Alx17

17 Kontribusi 0 Poin

Dipost 6 tahun yang lalu