jQuery UI autocomplete – option source – callback


Dimana bisa mendapatkan contoh custom source yang menggunakan callback function dari jQuery UI autocomplete?


Dari contoh-contoh tersebut, ada beberapa hal yang penting untuk diketahui, mari kita lihat contoh berikut ini:

Contoh 1:

File customsource.cfm ini adalah contoh sederhana penggunaan autocomplete, source adalah sebuah string dari URL yang dituju

<!--- customsource.cfm --->
<input type="text" name="inputAutocomplete" id="inputAutocomplete">

<link href="../jquery-ui-1.8.18.custom/css/custom-theme/jquery-ui-1.8.18.custom.css" type="text/css" rel="stylesheet">

<script src="../jquery-ui-1.8.18.custom/js/jquery-1.7.1.min.js"></script>
<script src="../jquery-ui-1.8.18.custom/js/jquery-ui-1.8.18.custom.min.js"></script>

<script>
	$( function(){
		$("#inputAutocomplete").autocomplete({
			source: "query.cfm"
		});
	});
</script>

File query.cfm adalah file tujuan dari option source

<!--- query.cfm --->
<cfsetting showdebugoutput="false" enablecfoutputonly="true">

<cfscript>
	hewan = [
		{
			kelompok = "unggas",
			nama = "ayam"
		},
		{
			kelompok = "unggas",
			nama = "angsa"
		},
		{
			kelompok = "unggas",
			nama = "bebek"
		},
		{
			kelompok = "unggas",
			nama = "burung"
		},
		{
			kelompok = "mamalia",
			nama = "gajah"
		},
		{
			kelompok = "mamalia",
			nama = "kucing"
		},
		{
			kelompok = "mamalia",
			nama = "lumba-lumba"
		},
		{
			kelompok = "mamalia",
			nama = "sapi"
		},
		{
			kelompok = "melata",
			nama = "buaya"
		},
		{
			kelompok = "melata",
			nama = "cicak"
		},
		{
			kelompok = "melata",
			nama = "kadal"
		},
		{
			kelompok = "melata",
			nama = "ular"
		}
	];
</cfscript>

<cfset qryHewan = QueryNew("id,kelompok,nama")>

<cfset id = 0> 

<cfloop array="#hewan#" index="indexHewan" >
	<cfset id++>
	<cfset QueryAddRow(qryHewan)>
	
	<cfset QuerySetCell(qryHewan, "id", id)>
	<cfset QuerySetCell(qryHewan, "kelompok", indexHewan.kelompok)>
	<cfset QuerySetCell(qryHewan, "nama", indexHewan.nama)>
</cfloop>

<cfquery name="qryResult" dbtype="query">
	SELECT	*
	FROM	qryHewan
	WHERE	nama LIKE <cfqueryparam cfsqltype="cf_sql_varchar" value="%#url.term#%">
</cfquery>

<cfsavecontent variable="result" >
	<cfoutput>
		[
			<cfloop query="qryResult">
				
				{
					"id": #JSStringFormat(qryResult.id)#,
					"value": "#JSStringFormat(qryResult.nama)#",
					"label": "#JSStringFormat(qryResult.nama)#"
				}
				
				<cfif qryResult.currentRow neq qryResult.recordCount>
					,
				</cfif>
			
			</cfloop>
		]
	</cfoutput> 
</cfsavecontent>

<cfset result = REReplace(result, "[[:cntrl:]]{2,}", " ", "ALL")>

<cfcontent reset="true">
<cfoutput>#result#</cfoutput>
<cfabort>

Contoh 2:

Sekarang kita akan coba untuk contoh penggunaan dengan satu elemen tambahan yang harus kita kirimkan ke server untuk mendapatkan hasil yang diinginkan. Di sini kita memasukkan kolom kelompok di query sebagai salah satu kriteria pencarian.

<!--- customsource.cfm --->
Kelompok :
<select name="selectKelompok" id="selectKelompok">
	<option value="unggas">Unggas</option>
	<option value="mamalia">Mamalia</option>
	<option value="melata">Melata</option>
</select>
<br><br>
Input Autocomplete : 
<input type="text" name="inputAutocomplete" id="inputAutocomplete">

<link href="../jquery-ui-1.8.18.custom/css/custom-theme/jquery-ui-1.8.18.custom.css" type="text/css" rel="stylesheet">

<script src="../jquery-ui-1.8.18.custom/js/jquery-1.7.1.min.js"></script>
<script src="../jquery-ui-1.8.18.custom/js/jquery-ui-1.8.18.custom.min.js"></script>

<script>
	$( function(){
		$("#inputAutocomplete").autocomplete({
			source: function(request, response) {
				$.ajax({
					data: {
						term: request.term,
						kelompok: $("#selectKelompok").val()	
					},
					dataType: "json",
					success: function(data, textStatus, jqXHR) {
						response(data);
					},
					type: "POST",
					url: "query.cfm"
				});
			}
		});
	});
</script>

Di sini option source adalah sebuah callback function dengan 2 arguments request dan response. request adalah sebuah object yang memiliki hanya sebuah property term yang isinya adalah text yang kita tuliskan di element autocomplete tadi (inputAutocomplete), response adalah sebuah callback function yang harus kita panggil ketika response dari server telah diterima.

Di file query.cfm kita tambahkan kriteria pencarian dari kolom kelompok.

<!--- query.cfm --->
<cfsetting showdebugoutput="false" enablecfoutputonly="true">

<cfscript>
	hewan = [
		{
			kelompok = "unggas",
			nama = "ayam"
		},
		{
			kelompok = "unggas",
			nama = "angsa"
		},
		{
			kelompok = "unggas",
			nama = "bebek"
		},
		{
			kelompok = "unggas",
			nama = "burung"
		},
		{
			kelompok = "mamalia",
			nama = "gajah"
		},
		{
			kelompok = "mamalia",
			nama = "kucing"
		},
		{
			kelompok = "mamalia",
			nama = "lumba-lumba"
		},
		{
			kelompok = "mamalia",
			nama = "sapi"
		},
		{
			kelompok = "melata",
			nama = "buaya"
		},
		{
			kelompok = "melata",
			nama = "cicak"
		},
		{
			kelompok = "melata",
			nama = "kadal"
		},
		{
			kelompok = "melata",
			nama = "ular"
		}
	];
</cfscript>

<cfset qryHewan = QueryNew("id,kelompok,nama")>

<cfset id = 0> 

<cfloop array="#hewan#" index="indexHewan" >
	<cfset id++>
	<cfset QueryAddRow(qryHewan)>
	
	<cfset QuerySetCell(qryHewan, "id", id)>
	<cfset QuerySetCell(qryHewan, "kelompok", indexHewan.kelompok)>
	<cfset QuerySetCell(qryHewan, "nama", indexHewan.nama)>
</cfloop>

<cfquery name="qryResult" dbtype="query">
	SELECT	*
	FROM	qryHewan
	WHERE	nama LIKE <cfqueryparam cfsqltype="cf_sql_varchar" value="%#form.term#%">
	AND		kelompok = <cfqueryparam cfsqltype="cf_sql_varchar" value="#form.kelompok#">
</cfquery>

<cfsavecontent variable="result" >
	<cfoutput>
		[
			<cfloop query="qryResult">
				
				{
					"id": #JSStringFormat(qryResult.id)#,
					"value": "#JSStringFormat(qryResult.nama)#",
					"label": "#JSStringFormat(qryResult.nama)#"
				}
				
				<cfif qryResult.currentRow neq qryResult.recordCount>
					,
				</cfif>
			
			</cfloop>
		]
	</cfoutput> 
</cfsavecontent>

<cfset result = REReplace(result, "[[:cntrl:]]{2,}", " ", "ALL")>

<cfcontent reset="true">
<cfoutput>#result#</cfoutput>
<cfabort>

Sebagai bahan referensi silahkan lihat function _initSource dan _response di source code jquery.ui.autocomplete.js

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: