Postingan lainnya

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 5 tahun yang lalu

8 Jawaban:

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

@dianarifr

642 Kontribusi 316 Poin

Dipost 5 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 5 tahun yang lalu

maksudnya gan? ane kurang paham

@dianarifr

642 Kontribusi 316 Poin

Dipost 5 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 5 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 5 tahun yang lalu

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

@Alx17

17 Kontribusi 0 Poin

Dipost 5 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 5 tahun yang lalu

Terima kasih banyak gan

@Alx17

17 Kontribusi 0 Poin

Dipost 5 tahun yang lalu